import React, { Component } from 'react';
import Demo1 from './demo1.js'
import './App.css'

import { BrowserRouter as Router, Route} from 'react-router-dom';

import A from './main/a.js'
import B from './main/b.js'
import C from './main/c.js'

import Nav from './nav.js'
var arr =[<span className="margin-r">1</span>,<span>2</span>];
class App extends Component {
render() {

return (


  <div className="App">
    

    <Router>
        <div>
        <Nav/>
          <Route exact path="/" component={A} />
          <Route  path="/b" component={B} />
          <Route  path="/c" component={C} />
        </div>   
    </Router>

    <header className="App-header">
      <Demo1 name="huxiang"/>
      {arr.map(function(name,key){
        return <p key={key}>{name}</p>
      })}
    </header>
  </div>
);

}
}

export default App;

import React from 'react';
import { NavLink} from 'react-router-dom';

export default class nav extends React.Component{

render() {

   return(
        <div>
               <li><NavLink  to="/">A</NavLink ></li>
            <li><NavLink  to="/b">B</NavLink ></li>
            <li><NavLink  to="/c">C</NavLink ></li>
        </div>
    );

}
}
+++ nav.js

========================================
為什么 Nav 導(dǎo)航組件 必須寫在 Router 組件里面包裹著

Router NavLink Route 他們之間的關(guān)系到底是怎么樣的