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

最新推荐文章于 2025-07-19 01:45:00 发布

原创最新推荐文章于 2025-07-19 01:45:00 发布 · 5.7k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了React Router 4+版本的使用方法，包括BrowserRouter和HashRouter两种模式，展示了如何在项目中设置路由，使用Switch、Route、NavLink组件进行页面跳转和激活状态管理。

react-router

我们使用的是4.+版本，使用的是react-router-dom
react-router是3.x的版本
路由的模式有两种
- 老浏览器提供的 hash模式，我们称之为： HashRouter
- H5提供的的 history 模式，我们称之为 BrowserRouter
  注意： H5模式的路由需要后端支持
使用路由
在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'));

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

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

重定向

第一种

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

第二种

路径完全匹配 exact

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

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>

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

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