React-router( 路由 HashRouter 和 BrowserRouter 模式)

react-router

1. 我们使用的是4.+版本，使用的是react-router-dom

2. react-router是3.x的版本

3. 路由的模式有两种

   • 老浏览器提供的 hash模式， 我们称之为： HashRouter
   • H5提供的的 history 模式，我们称之为 BrowserRouter
     注意： H5模式的路由需要后端支持

4. 使用路由

5. 在index.js中使用路由模式将组件包裹

  // HashRouter 是 老版本的浏览器的history提供的hash路由模式
  // BrowserRouter 是 H5提供的history模式
  // import { HashRouter as Router }  from 'react-router-dom'
  import { BrowserRouter as Router } from 'react-router-dom'

  ReactDOM.render(
  <Router>
    <App />
  </Router>
  , document.getElementById('root'));

5. 书写路由展示区域， 使用 Route path是路径 component 是组件

  <Route path = "/list" component = { List }></Route>

6. 重定向

• 第一种

<Route to = "/" component = { Home }/>

• 第二种

7. 路径完全匹配 exact

<Route to = "/" component = { Home } exact/>

8. Switch ( 路由只匹配一次 )

    <Switch>
      <Route path = "/" component = { Home } exact></Route>
      <Route path = "/home" component = { Home }></Route>
      <Route path = "/mine" component = { Mine } ></Route>
      <Route path = "/mine/login" component = { Login } exact   ></Route>
      <Route path = "/list" component = { List }></Route>
    </Switch>

9. NavLink( 路由激活时可以用activeClassName 来添加active类名 )

<NavLink  activeClassName="active"  className="nav-link" to = "/home">Home</NavLink>