react-router 4.2问题

Question

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 导航组件 必须写在 Router 组件里面包裹着

Router NavLink Route 他们之间的关系到底是怎么样的

Answer 1

router是一个总的状态管理，route是向router注册路由与页面关系的一个组件，NavLink是对router产生的 context.router 利用的一个组件。router只接受一个内容区

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

可以这样写