react笔记（十九）—— 嵌套路由的配置

小徐今天学习了吗
866 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章react笔记（十八）—— react路由基本使用中，我们学习了路由基本使用、Router详细说明、路由的执行过程、Link与NavLink、Switch与404等相关知识点。在本篇文章中，我们将学习到嵌套路由的配置、编程式导航、动态路由与路由参数获取、路由重定向等相关知识点。

嵌套路由的配置

在React中，配置嵌套路由非常的简单，因为Route就是一个组件，可以在任意想配置的地方进行配置。但是配置嵌套路由的时候，需要对路径进行处理，必须要先匹配到父级路由，才能匹配到子路由。

<Switch>
  <Route path="/find/top" component={Top}></Route>
  <Route path="/find/list" component={List}></Route>
</Switch>

编程式导航

点击登录按钮，登录成功后，通过代码跳转到后台首页，那么该如何实现呢？编程式导航是通过 JS 代码来实现页面跳转。history 是 React 路由提供的，用于获取浏览器历史记录的相关信息。push(path)：跳转到某个页面，参数 path 表示要跳转的路径。go(n)： 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）。

// 如果使用js代码的方式实现路由的跳转----》编程式导航
const history = useHistory()

history.push('地址')
history.go() 1 -1  前进和后退
history.replace('地址') 跳转，，会替换当前的记录

动态路由与路由参数获取

可以使用:id的方式来配置动态的路由参数。

// 可以匹配 /users/1  /users/2  /users/xxx
<Route path="/users/:id" component={Users} />

在组件中，通过props可以接收到路由的参数。

render(){
    console.log(this.props.match.params)
}

路由重定向

在新昂目中，我们经常有这个需求，能够在打开页面时就展示首页内容。我们先匹配默认路由，进行重定向。

为了实现该功能，需要用到路由的两个内容：

  1. Route 组件的 render 属性
  2. Redirect 组件实现路由跳转

Route 的 render 属性：用来内联渲染任意内容。默认路由地址为：'/' ，表示：第一次打开项目时，访问到的路由地址。我们之前学习过component 属性：需要指定要渲染的组件，在使用的时候，必须先创建一个组件，然后，设置为 component 属性的值，才能渲染。

<Route path="/" component={Login} />

我们还可以使用render 属性：用来进行内联渲染，也就是可以直接渲染任何内容，不需要额外的创建一个组件。render 属性的值是函数，通过函数的返回值来指定要渲染的内容。

<Route path="/" render={() => <div>内联在 Route 标签上的内容</div>} />

路由重定向

import { Redirect } from 'react-router-dom'
// 路由重定向组件：
<Redirect to="/login" />

所以，结合上述所说，通过以下步骤实现路由重定向。

  1. 在 App.js 中添加一个新的 Route，用来匹配默认路由
  2. 为 Route 组件添加 render 属性，用来渲染自定义内容
  3. 在 render 中，渲染 Redirect 实现路由重定向
import { Redirect } from 'react-router-dom'

<Route exact path="/" render={() => <Redirect to="/home" />} />
avatar
文章
阅读
粉丝