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 , 2 ];
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}

})} </header> </div> );

}
}

< H1 > export default App; < / H1 >

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>
    );

}
}
PP+ nav.js

=
Why Nav navigation components must be written in Router components wrapped

Router NavLink Route what exactly is the relationship between them

Mar.14,2021

router is an overall state management, route is a component that registers routing and page relationships with router, and NavLink is a component that leverages the context.router generated by router. Router accepts only one content area

  <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>

can be written like this

Menu