React 路由精讲(四)

一、前言

        在上一篇博客中,只是在最后介绍了一下 react-router-dom 路由的 安装、BrowserRouter 和 HashRouter 的区别. 今天我们将共同学习 React 路由的剩余部分.

        Follow me ~

二、Route 配置路径

1. Route 组件

通过该组件来设置应用单个路由信息，Route 组件所在的区域就是就是当 URL 与当前 Route 设置的 path 属性匹配的时候，后面 component 将要显示的区域

        昨天我们配置了 BrowserRouter 和 HashRouter 组件,从简单方面来说就是 url 路径上带不带 “#” 号的意思. 然后就要开始配置 路由跳转的路径地址了,请看下面代码 :

import React from "react"
import {
   Route} from "react-router-dom";
import IndexPage from './view/index';
import AboutPage from './view/about';
import AboutMorePage from './view/aboutMore';

function App() {
   
  return (
    <div>
      <Route path="/" component={
   IndexPage}/>
      <Route path="/about" component={
   AboutPage}/>
      <Route path="/about/more" component={
   AboutMorePage}/>
    </div>
  );
}

export default App;

React 的配置路由跳转就是这么简单,可以分为:

1. 在上面引入 Route 和 组件地址
2. 上面使用的是 函数式组件,你也可以使用类组件,在 return 里面 使用 Route 单标签,里面写入匹配的路径 和 组件地址

        我们来看效果图,这样一个 React 路由就配置好了

2. exact

        相信你在浏览器中变更 路径之后,只要是路径中包含有配置的路径时,组件内容都会被显示出来

        为了解决这个弊端,我们可以使用 exact

exact 属性表示路由使用 精确匹配模式，非 exact 模式下 ‘/’ 匹配所有以 ‘/’ 开头的路由
path中 匹配url的方式不是相等,而是 以指定的的 url 开头
为了解决这个问题, 你可以在配置路径时,在里面 加上一个单词 exact

        代码案例 :

function App() {
   
  return (
    <div>
      <Route path="/" exact component={
   IndexPage}/>
      <Route path="/about" exact component={
   AboutPage}/>
      <Route path="/about/more" exact component={
   AboutMorePage}/>
    </div>
  );
}

        浏览器效果 :

三、Link 组件

Link 组件用来处理 a 链接 类似的功能（它会在页面中生成一个 a 标签），但设置这里需要注意的，react-router-dom 拦截了实际 a 标签的默认动作，然后根据所有使用的路由模式（Hash 或者 HTML5）来进行处理，改变了 URL，但不会发生请求，同时根据 Route 中的设置把对应的组件显示在指定的位置

to 属性

to 属性类似 a 标签中的 href

        代码实例 :

创建一个自定义组件

import React from "react"
import {
   Link} from "react-router-dom"

export default function Nav(){
   
    return (
        <nav>
            <Link to="/">首页</Link>
            <span></span>

            <Link to="/about">关于我们</Link>
            <span></span>

            <Link to="/about/more">详情</Link>
            <span></span>
        </nav>
    )
}

app.js :

function App() {
   
  return (
    <div>
      <Nav/>

      <Route path="/" exact component={
   IndexPage}/>
      <Route path="/about" exact component={
   AboutPage}/>
      <Route path="/about/more" exact component={
   AboutMorePage}/>

    </div>
  );
}

        link 组件 和 path 属性的区别?

link 组件 只改变 url
path 属性 匹配 url

四、Route 属性

1. render

通过 render 属性来指定渲染函数，render 属性值是一个函数，当路由匹配的时候指定该函数进行渲染
它最终的效果也会向上面那样

        代码实例 :

<Route path="/" exact render={
   ()=>{
   
        return <IndexPage/>
      }}/>

2. props

如果 Route 使用的是 component 来指定组件，那么不能使用 props

        代码实例 :

父组件 :

// 引入 useState
import React,{
   useState} from "react"

function App() {
   
  let [user,setUser] = useState("router吧") 
  return (
    <div>
      <Nav/>

      <Route path="/" exact render={
   ()=>