react路由管理，router&&NavLink使用

react-router提供了一些router的核心api，例如：Router，Route，Switch等，但是它沒有提供dom操作進行跳轉的api。

React-router-dom提供了BrowserRouter，Route，Link等api，動态的，可以去使用dom的事件去控制路由。

exact的值為bool型，為true時表示嚴格精準比對，為false時為正常比對。

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

簡單版:

//a.js
import React from 'react'
class A extends React.Component {
render() {
    return (
      <div>
          a頁面
      </div >
    )
  }
}
export default A
           

//b.js
import React from 'react'
class  B extends React.Component {
render() {
    return (
      <div>
          b頁面
      </div >
    )
  }
}
export default B
           

//nav.js
import React from 'react'
import {NavLink} from 'react-router-dom';
class  nav extends React.Component {
render() {
    return (
      <ul>
        <li>
        <NavLink to="/a">A頁面</NavLink> 
        </li>
        <li>
         <NavLink to="/b">B頁面</NavLink>
         </li>
      </ul >
    )
  }
}
export default nav
           

//App.js
import React from 'react'
import Nav from "./views/nav"
import {
    Route,
    BrowserRouter as Router
} from 'react-router-dom'
import A from "./views/a"
import B from "./views/b"
class App extends React.Component {
render() {
    return (
      <div>
        <Router>
        <Nav/>
     <Route path="/a" component={A}/>
     <Route path="/b" component={B}/>
 </Router>
      </div >
    )
  }
}
export default App
           

或者 路由集中管理

// routes/router.js
import Home from "../views/home"
import A from "../views/a"
import B from "../views/b"
const routes = [
    { path: '/',
        component: Home,
        exact:true,
    },
    {
        path: '/a',
        component: A,
    },
    {
        path: '/b',
        component: B,
    }
]
export default routes
           

//App.js
import React from 'react'
import Nav from "./views/nav"
import {
    Route,
    BrowserRouter as Router
} from 'react-router-dom'
import routes from './routes/router'
class App extends React.Component {
render() {
    return (
      <div>
        <Router>
          <Nav/>
          <br/>
          {routes.map((route, i) => ( 
            <Route
              key={route.key || i}
              path={route.path}
              exact={route.exact}
              strict={route.strict}
              render={props => (
                <route.component {...props}  route={route} />
              )}
            />
          ))}
        </Router>
      </div >
    )
  }
}
export default App