React-Router

最新推荐文章于 2025-06-10 11:54:29 发布

云中自有锦书

最新推荐文章于 2025-06-10 11:54:29 发布

阅读量686

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react-router

本文链接：https://blog.youkuaiyun.com/weixin_41282726/article/details/99673743

React 专栏收录该内容

3 篇文章

订阅专栏

React-Router通过react-router-dom包提供组件实现URL与UI的同步。Location对象对应URL，而UI由React组件决定。其优点在于便捷的路由管理，但API不够稳定，升级时可能需要调整代码。主要组件包括HashRouter、BrowserRouter、Link、NavLink、Route和Switch。Link和NavLink用于导航，Route定义路由规则，Switch确保唯一匹配。编程式导航可通过router.push()实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考链接：https://segmentfault.com/a/1190000017140200

react-router-dom这个包，给我们声明了很多的组件,我们可以直接导入这些组件去使用，就可以完成我们想要的路由相关的功能

原理：实现URL与UI界面的同步。其中在react-router中，URL对应Location对象，
而UI是由react components来决定的，这样就转变成location与components之间的同步问题。

优点：

1.风格: 与React融为一体,专为react量身打造，编码风格与react保持一致，例如路由的配置可以通过component来实现
2.简单: 不需要手工维护路由state，使代码变得简单
3.强大: 强大的路由管理机制，体现在如下方面
4.路由配置: 可以通过组件、配置对象来进行路由的配置
5.路由切换: 可以通过<Link> Redirect进行路由的切换
6.路由加载: 可以同步记载，也可以异步加载，这样就可以实现按需加载
7.使用方式: 不仅可以在浏览器端的使用，而且可以在服务器端的使用

缺点：API不太稳定，在升级版本的时候需要进行代码变动。

react-router4和react-router3区别：https://blog.youkuaiyun.com/qq_35484341/article/details/80500237

1. V4不再使用V3里的{props.children}(代表所有路由-个人理解)，而V4丢给 DOM 的是我们的应用程序本身.
2. V4还同时支持同时渲染多个路由，1和2都可参照下面代码，当访问 /user 时，两个组件都会被渲染。(V3可实现但过程复杂)
3.获取路由的路径匹配，可以使用props.match.path获取，match上还有match.params,match.url等属性。
注：url是浏览器的url的一部分，path是给router写的路径
4.多了一个限制未登录的用户访问某些路由功能，可以在应用程序顶端中设置一个主入口，区别登录和未登录UI展示界面。

  <div className="primary-layout">
    <header>
      Our React Router 4 App
      <Route path="/user" component={UsersMenu} />
    </header>
    <main>
      <Route path="/" exact component={HomePage} />
      <Route path="/user" component={UsersPage} />
    </main>
  </div>;

1. 路由容器相关的组件： HashRouter: 有#号，锚点实现 BrowserRouter：没有#号，<h5></h5>

2. 路由连接 Link NavLink

Link: to属性，表示的点击这个Link，跳转到的路由， Link最终渲染成a标签

NavLink: 作用和Link是一样的，路由跳转 NavLink比Link更强大的一点是可以指定样式

3. 路由匹配 Route: 一条路由规则 Switch: 保证同时只会匹配一条路由规则

Route表示一条路由规则，同时也表示路由的出口（匹配的组件在哪儿显示）

Switch组件，可以保证只会匹配到一个路由， Swicth中只能出现Route

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <div>我是一个根组件</div>
          <ul>
            <li>
              <NavLink activeClassName="now" to="/home">
                首页
              </NavLink>
            </li>
            <li>
              <NavLink activeClassName="now" to="/users">
                用户管理
              </NavLink>
            </li>
            <li>
              <NavLink activeClassName="now" to="/login">
                登录
              </NavLink>
            </li>
          </ul>

          <Switch>
            {/* path="/" 只要是/xxx的路由都匹配上exact表示精确匹配 */}
            {/* Redirect: 表示路由的重定向 */}
            <Redirect exact from="/" to="/home" />
            <Route path="/home" component={Home} />
            <Route path="/users" component={User} />
            <Route path="/login" component={Login} />
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}

4. 声明式导航：通过Link或者NavLink实现导航的跳转

编程式导航：通过js代码来实现路由的跳转 router.push()

import React from 'react'
// 如果想要通过js来实现react中路由的跳转
// 1. 导入withRouter方法
// 2. 使用withRouter包裹住当前组件
// 3. withRouter把当前组件包裹后，在当前组件的props中就能够获取history对象
// ，通过history对象就可以实现路由的额跳转
import { withRouter } from 'react-router-dom'
class Login extends React.Component {
  render() {
    console.log(this.props.history)
    // history对象
    let { history } = this.props
    return (
      <div>
        {/* 需求：点击登录的时候，跳转到首页组件去 */}
        {/* 编程式导航：通过js来显现路由的跳转 */}
        这是Login组件{' '}
        <button onClick={() => history.push('/home')}>点击登录</button>
      </div>
    )
  }
}
export default withRouter(Login)