⑦ React 路由解决方案 react-router

╰半橙微兮° 2022-10-29 12:27 256阅读 0赞

查看专栏其它文章：

[① React 介绍及JSX简单使用][React _JSX]

[② React 面向组件编程(state、props、refs)、事件处理][React _state_props_refs]

[③ React 条件渲染、组件生命周期、表单与事件][React]

[④ React 列表与Keys、虚拟DOM相关说明、AJAX][React _Keys_DOM_AJAX]

[⑤ React 基于react脚手架构建简单项目][React _react]

[⑥ React 项目中的AJAX请求、组件间通信的2种方式（props、消息订阅和发布）][React _AJAX_2_props]

--------------------

### React ###

*  react-router
 *   *  基础用法
     *   *  Router 路由器组件
         *  Link、Switch、Route、Redirect
     *  嵌套路由
     *   *  向路由组件传递数据
         *   *  match
             *  history

--------------------

***本人是个新手，写下博客用于自我复习、自我总结。  
如有错误之处，请各位大佬指出。  
学习资料来源于：尚硅谷***

--------------------

因为 React-Router 整体内容繁杂，所以为了文章内容准确性，参考了一些文章。其链接如下：

[react 精华之react-router][react _react-router]

[阮一峰 之 React Router][_ React Router]

[React Router 中文文档][React Router]

--------------------

# react-router #

react-router 是 React 的一个插件库，它**专门用来实现一个 SPA 应用**（单页应用）。基于 react 的项目基本都会用到此库。那么何为单页应用？

在一个项目中，通常承载的功能页面是很多的，这就需要我们的页面不断变化。但是页面的变化不能总依靠页面的跳转，随着功能的增加，这必然会影响效率。所以为了解决这个问题单页应用出现了。

单页应用就是 **整个应用只有一个完整的页面**，点击页面中的链接不会刷新页面，本身也不会向服务器发请求，而是只去做页面的局部更新。

而 React-Router 被称为路由库，何为路由？

**路由**：一个映射关系 ( key - value )，key 是 路由路径（path），value 是前台路由（组件 component ）或后台路由（处理请求的回调函数 function）。

这其中**后台路由**是 node 服务器端路由，value 是 function。在这里，路由器是 router，它负责管理路由。路由就是 route 。如果要注册路由：`router.get(path, function(req, res))`，此时当 node 接收到一个请求时， 根据请求路径找到匹配的路由， 调用路由中的函数来处理请求， 返回响应数据。

而**前台路由**是 浏览器端路由，value 是 component。此时如果要注册路由：`<Route path="/about" component={About}>`。当请求的是路由 path 时，界面就会更新显示对应的组件，且浏览器端不发送 http 请求。 因此，react-router 专门用来实现 SPA 应用。

现在这么说还是很抽象，先来看一下最基础的用法。（本文不包括 CSS 代码）

--------------------

## 基础用法 ##

在使用前先安装：`npm install --save react-router-dom` （用于 Web 端）

这个 react-router-dom 依赖于 react-router ，所以 react-router 也会被自动安装上。

本例将实现下图中的效果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]  
在本例中，App 依然为根组件。在根组件中，将会有两个路由链接，通过点击这两个链接，从而让右侧内容区显示不同路由组件中的内容。

项目结构可按下图创建。 普通组件放入 components （ App ），路由组件放入 views （ About、Home）。  
![在这里插入图片描述][2021021516462147.png]  
About、Home中的内容：

import React from 'react'
    export default function About() { 
      return <div>About组件内容</div>
    }

import React from 'react'
    export default function Home() { 
      return <div>Home组件内容</div>
    }

--------------------

### Router 路由器组件 ###

**index.js**

在 index.js 中，我们现在**需要使用 路由器Router组件 来包裹**。顶层的 Router 组件负责分析监听 URL 的变化，在它之下的 路由Route 组件（注意比 Router 少一个“r”）就可以直接读取这些信息。如果不这样做，路由效果就无法实现。

而 Router 又至少可分为两种：

**第一种 BrowserRouter** 。假设它用在本例中，我们这么做： / 对应 Home 页，/about 对应 About 页。但是这样的设计需要服务器端渲染，因为用户可能直接访问任何一个 URL，服务器端必须能对 / 的访问返回 HTML，也要对 /about的访问返回 HTML。  
![在这里插入图片描述][20210215191315323.png]  
**第二种 HashRouter** 。它相比于第一种，需要通过 URL 后面的 \# 部分来决定路由。比如：/\#/ 对应 Home 页，/\#/about 对应 About 页。在这种用法下，URL 中 \# 之后的部分不会发送给服务器，所以无论哪个 URL，最后都是访问服务器的 / 路径，服务器也只需要返回同样一份 HTML 就可以，然后由浏览器端解析 \# 后的部分，完成浏览器端渲染。  
![在这里插入图片描述][20210215191348187.png]  
对于这两种，因为 create-react-app 产生的应用默认不支持服务器端渲染，所以平常写项目时，可以选择使用 HashRouter。但在实际产品中，最好还是用 BrowserRouter，这样用户体验更好。

import React from 'react'
    import ReactDOM from 'react-dom'
    import { BrowserRouter} from 'react-router-dom'
    import App from './components/app'
    
    ReactDOM.render(
      (
        <BrowserRouter>
          <App/>
        </BrowserRouter>
      ),
      document.getElementById('root')
    )

--------------------

### Link、Switch、Route、Redirect ###

**app.jsx**

在根组件 app.jsx 中会涉及到很多内容：

（使用以下内容时，一定需要：`import {Route, Switch, Redirect, Link, NavLink} from 'react-router-dom'`）

--------------------

**（1）Link**

对于单页应用我们已经知道，接下来将会在不同“页面”之间切换。之前无论是 a 标签做的，还是 div + click事件 做的，想要实现往往需要一个“导航栏”。现在我们不想让浏览器行为是网页跳转，所以不可能用之前的方式来做。

而现在的解决方案就是：用 react-router 提供的 Link 组件。它会在用户点击时，让 react-router 知晓这是一个单页应用的链接，不用网页跳转只做局部页面更新 （相当于 a 标签）。

演示代码如下：

<div className="list-group-item"><Link to='/about'>About</Link></div>
    <div className="list-group-item"><Link to='/home'>Home</Link></div>

--------------------

除此以外，还可以用 NavLink 组件 来实现该功能。NavLink 是 Link 的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数。组件的属性有：

activeClassName(string)：设置选中样式，默认值为active

activeStyle(object)：当元素被选中时，为此元素添加样式

exact(bool)：为true时，只有当导致和完全匹配class和style才会应用

strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线

isActive(func)：判断链接是否激活的额外逻辑的功能

演示代码如下：

<NavLink className="list-group-item" to='/about' activeClassName='activeClass'>About</NavLink>
    <NavLink className="list-group-item" to='/home' activeClassName='activeClass'>Home</NavLink>

在这里使用的 activeClassName 是指该链接被选中时的样式。设置好样式后不要忘记导入css文件：`import './xxx.css'`

.activeClass { 
      color: red !important;
    }

**Link 和 NavLink 的更多比对和用法可参考：**[React Router中Link和NavLink的学习总结][React Router_Link_NavLink]，该有的内容文章都有写。

--------------------

针对上面 NavLink 的用法，如果所有路由链接都有相同的 activeClassName，想要修改时就需要一个一个修改（ 当然开发工具也有统一修改功能 ）或者 有其它用法，为了更加方便管理，我们可以这样做：

<MyNavLink className="list-group-item" to='/about'>About</MyNavLink>
    <MyNavLink className="list-group-item" to='/home'>Home</MyNavLink>

这里的 MyNavLink 是自定义的组件，不要忘记导入组件：`import MyNavLink from './my-nav-link'`

当我们对其样式或者功能要做出修改时，我们只需要去 MyNavLink 中，统一修改即可。需要注意的是：这里需要使用 props 才能知道要跳转的路由链接。（ 那么props 中到底有什么内容将会在文章下方：向路由组件传递数据 说明）

import React from 'react'
    import { NavLink} from 'react-router-dom'
    
    export default function MyNavLink(props) { 
      return <NavLink { ...props} activeClassName='activeClass'/>
    }

--------------------

**（2）Switch + Route**

设置好路由链接之后，为了根据用户点击去显示各个路由组件的内容，需要使用 Switch 和 Route。演示代码：

--------------------

**（3）Redirect**

当我们设置好以上路由链接后，初始情况是不会进入任何路由链接的。如果我们想默认跳转到某路由链接，只需要使用 Redirect 即可。演示代码：

--------------------

完整代码：

import React from 'react'
    import { Route, Switch, Redirect, Link, NavLink} from 'react-router-dom'
    import About from '../views/about'
    import Home from '../views/home'
    
    export default class App extends React.Component { 
      render() { 
        return (
          <div>
            <div className="row">
              <div className="col-xs-offset-2 col-xs-8">
                <div className="page-header">
                  <h2>React Router Demo</h2>
                </div>
              </div>
            </div>
    
            <div className="row">
              <div className="col-xs-2 col-xs-offset-2">
                <div className="list-group">
                  { /*导航路由链接*/}        
                  <div className="list-group-item"><Link to='/about'>About</Link></div>
                  <div className="list-group-item"><Link to='/home'>Home</Link></div>
                  
                  <NavLink className="list-group-item" to='/about'>About</NavLink>
                  <NavLink className="list-group-item" to='/home'>Home</NavLink>
                </div>
              </div>
              <div className="col-xs-6">
                <div className="panel">
                  <div className="panel-body">
                    { /*可切换的路由组件*/}
                    <Switch>
                      <Route path='/about' component={ About}/>
                      <Route path='/home' component={ Home}/>
                      <Redirect to='/about'/>
                    </Switch>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )
      }
    }

--------------------

除此以外，还可以实现 **动态路由**。假设，我们增加一个新的页面叫 Product，对应路径为 /product，但是只有用户登录了之后才显示。如果用静态路由，我们在渲染之前就确定这条路由规则，这样即使用户没有登录，也可以访问 product，我们还不得不在 Product 组件中做用户是否登录的检查。

如果用动态路由，则只需要在代码中的一处涉及这个逻辑：

<div className="panel-body">
    	<Switch>
    		<Route path='/about' component={About}/>
    		<Route path='/home' component={Home}/>
          	{
            	isUserLogin() &&
            	<Route path='/product' component={Product}/>,
          	}  
    	</Switch>
    </div>

--------------------

## 嵌套路由 ##

Route 路由组件 是可以嵌套的。现在就实现下图中的内容：在 Home 组件中，加入两个 子路由链接。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]  
（ 如果对相关基本语法感到困惑，可参照我的 ① ~ ④ 篇 测试语法文章）

my-nav-link 中的内容：（ 之前提到的自定义NavLink组件 ）

import React from 'react'
    import { NavLink} from 'react-router-dom'
    
    export default function MyNavLink(props) { 
      return <NavLink { ...props} activeClassName='activeClass'/>
    }

**home.jsx**

在 home 路由组件 中，添加两个子路由链接，和之前的做法是相同的。只不过因为 子路由 在 home 下，所以 path 的路径如下设置即可。

import React from 'react'
    import { Switch, Route, Redirect} from 'react-router-dom'
    import MyNavLink from '../components/my-nav-link'
    import News from './news'
    import Message from './message'
    
    export default function Home() { 
      return (
        <div>
          <h2>Home组件内容</h2>
          <div>
            <ul className="nav nav-tabs">
              <li>
                <MyNavLink to='/home/news'>News</MyNavLink>
              </li>
              <li>
                <MyNavLink to="/home/message">Message</MyNavLink>
              </li>
            </ul>
            <Switch>
              <Route path='/home/news' component={ News} />
              <Route path='/home/message' component={ Message} />
              <Redirect to='/home/news'/>
            </Switch>
          </div>
        </div>
      )
    }

**News.jsx**

import React from 'react'
    
    export default class News extends React.Component { 
      state = { 
        newsArr: ['news001', 'news002', 'news003']
      }
    
      render () { 
        return (
          <div>
            <ul>
              { 
                this.state.newsArr.map((news, index) => <li key={ index}>{ news}</li>)
              }
            </ul>
          </div>
        )
      }
    }

**Message.jsx**

import React from 'react'
    
    export default class Message extends React.Component { 
      state = { 
        messages: [
            { id: 1, title: 'Message001'},
            { id: 3, title: 'Message003'},
            { id: 6, title: 'Message006'},
        ]
      }
    
      render () { 
        return (
          <div>
            <ul>
              { 
                this.state.messages.map((message, index) => <li key={ index}>{ message}</li>)
              }
            </ul>
          </div>
        )
      }
    }

--------------------

这些基本用法还是简单的，接下来在上面代码的基础上做其它功能：在 message 组件中，通过点击 路由链接，在下方内容区显示相关内容详情。（ 按钮功能的实现 将在后续提及 ）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]  
在这里和以往遇到的问题不同的是：这次的几个路由链接中的内容是相似的，我们最好将这部分内容写在同一个组件中，否则在遇到更多相似内容的路由链接时，去为每个路由创建相关组件也不现实。所以该如何通过点击这些路由链接，让其内容详情子路由组件 message-detail 展现不同内容，就是这里需要解决的问题。

--------------------

### 向路由组件传递数据 ###

为了解决上述提到的问题，我们可以通过传递数据解决。简单地说：当我们点击某路由链接，那我们就将能够区别这些路由链接的标识传递出去，再在子组件中比对，得知要显示的是哪部分内容即可。React-Router 也允许我们向路由组件传递数据。

因此这部分数据可以这么设计：用 id 去作为标识。

state = { 
        messages: [
          { id: 1, title: 'Message001'},
          { id: 3, title: 'Message003'},
          { id: 6, title: 'Message006'},
        ]
      }

那么在子组件中，父组件到底传递了什么？

在这里会用到文章上方提到的一种用法。在之前 自定义 NavLink 组件时，我们就曾接收过父组件传递过来的数据，但是没有去查看。代码如下：

import React from 'react'
    import { NavLink} from 'react-router-dom'
    
    export default function MyNavLink(props) { 
      return <NavLink { ...props} activeClassName='activeClass'/>
    }

那么现在去 message 组件的 render 中，我们输出 props，看一下从父组件中接收到了什么：

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

输出结果：  
![在这里插入图片描述][20210215220103469.png]  
在这里需要注意 history 和 match。

--------------------

#### match ####

首先我们看一下里面的内容：  
![在这里插入图片描述][20210215220717943.png]  
值得注意的是 path 和 params。这里的 path 就是当前路由链接的路径，params 就是从父组件中接收到的参数。正因为 params 的存在，我们就能够接收父组件传递过来的参数 。

对于 path 的作用：在嵌套路由的代码中我们看到：`<Route path='/home/message' component={Message} />`。那现在要添加的新路由是在 message 中，因此新 path 是要在之前 path 的基础上进行扩展。那如果真的路由层数很多的情况下，一直在 原path 的后面添加，肯定会觉得冗余，也有可能写错。因此，我们就可以用这个 path 来替代这部分内容。

在这里需要注意：之前我们使用 NavLink 或 Link，指向的路由链接都是用字符串表示的，这没有问题。但是现在，我们的 path 是获取到的：`const path = this.props.match.path`，所以肯定不能用之前字符串的方式表示，我们需要让其注意到这里的 path 是参数名。同样地，为了展现不同的内容，路由链接也需要根据 id 变化。而对于 JSX 的语法规则，如果想要让其以 JS 的语法解析，外层需要用 `{`。所以这样做：

<Link to={`${path}/${m.id}`}>{m.title}</Link>

它路由链接的结果是：`/home/message/1` 或 `/home/message/3` 或 `/home/message/6` ，由后面的 id 来决定。因此在这里也就作出了区分。

把 Route 加上，message.jsx 的完整代码：

Route 里的 `:` 就是用来匹配URL的一个部分，直到遇到下一个 /、?、\#为止。

现在去子组件中，我们看一下 props 是否接收到了参数：  
![在这里插入图片描述][20210215225633845.png]  
这就证明了可以接收到参数。因此子组件 message-detail.jsx 的完整代码：

import React from 'react'
    
    const messageDetails = [
      { id: 1, title: 'Message001', content: '我爱你, 中国'},
      { id: 3, title: 'Message003', content: '我爱你, 老婆'},
      { id: 6, title: 'Message006', content: '我爱你, 孩子'},
    ]
    
    export default function MessageDetail(props) { 
    
      console.log(props);
      const id = props.match.params.id
      const md = messageDetails.find(md => md.id===id*1)
    
      return (
        <ul>
          <li>ID: { md.id}</li>
          <li>TITLE: { md.title}</li>
          <li>CONTENT: { md.content}</li>
        </ul>
      )
    }

--------------------

#### history ####

接下来将会实现下图中按钮中的功能。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]  
在这里，我们再去看在 message 组件输出的 props 中，想要实现这部分功能，将会用到这里的 history。  
![在这里插入图片描述][20210215220103469.png]  
需要说的是， **React Router 是建立在 history 之上**的。 而这个 history 库是**管理浏览器会话历史**的工具库，它包装的是原生 BOM 中 window.history 和 window.location.hash 。简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 location 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。

里面的内容如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 4]  
在这里就介绍常用的几个：

history.push()：添加一个新的历史记录

history.replace()：用一个新的历史记录替换当前的记录

history.goBack()：回退到上一个历史记录

history.goForword()：前进到下一个历史记录

history.go(n)：前进 或 后退 第 n 个历史记录

history.push 这个方法会向 history 栈里面添加一条新记录，这个时候用户点击浏览器的回退按钮可以回到之前的路径。history.replace 跟 history.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样，替换掉当前的 history 记录。

对 history 感兴趣，可参考文章：[react-router 中的history][react-router _history]

使用起来比较简单，message.jsx 完整代码：

import React from 'react'
    import { Link, Route} from 'react-router-dom'
    import MessageDetail from "./message-detail"
    
    export default class Message extends React.Component { 
      state = { 
        messages: []
      }
    
      componentDidMount () { 
        // 模拟发送ajax请求
        setTimeout(() => { 
          const data = [
            { id: 1, title: 'Message001'},
            { id: 3, title: 'Message003'},
            { id: 6, title: 'Message006'},
          ]
          this.setState({ 
            messages: data
          })
        }, 1000)
      }
    
      ShowDetail = (id) => { 
        this.props.history.push(`/home/message/${ id}`)
      }
    
      ShowDetail2 = (id) => { 
        this.props.history.replace(`/home/message/${ id}`)
      }
    
      back = () => { 
        this.props.history.goBack()
      }
    
      forward = () => { 
        this.props.history.goForward()
      }
    
      render () { 
        console.log(this.props)
        const path = this.props.match.path
    
        return (
          <div>
            <ul>
              { 
                this.state.messages.map((m, index) => { 
                  return (
                    <li key={ index}>
                      <Link to={ `${ path}/${ m.id}`}>{ m.title}</Link>
                         
                      <button onClick={ () => this.ShowDetail(m.id)}>查看详情(push)</button> 
                      <button onClick={ () => this.ShowDetail2(m.id)}>查看详情(replace)</button>
                    </li>
                  )
                })
              }
            </ul>
            <p>
              <button onClick={ this.back}>返回</button> 
              <button onClick={ this.forward}>前进</button> 
            </p>
            <hr/>
            <Route path={ `${ path}/:id`} component={ MessageDetail}></Route>
          </div>
        )
      }
    }

[React _JSX]: https://blog.csdn.net/qq_45613931/article/details/113522472
[React _state_props_refs]: https://blog.csdn.net/qq_45613931/article/details/113727625
[React]: https://blog.csdn.net/qq_45613931/article/details/113769585
[React _Keys_DOM_AJAX]: https://blog.csdn.net/qq_45613931/article/details/113790321
[React _react]: https://blog.csdn.net/qq_45613931/article/details/113791217
[React _AJAX_2_props]: https://blog.csdn.net/qq_45613931/article/details/113808232
[react _react-router]: https://blog.csdn.net/gwdgwd123/article/details/85029121
[_ React Router]: http://www.ruanyifeng.com/blog/2016/05/react_router.html
[React Router]: http://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]: /images/20221024/1a0cb3564b2d4bcaa1f211031fe722e9.png
[2021021516462147.png]: /images/20221024/a1caaa5f0221409d9de6ecf0a2940106.png
[20210215191315323.png]: /images/20221024/95083898e6d947f0b75d5b5f295ef934.png
[20210215191348187.png]: /images/20221024/31d3fabbb3d944f6a16b2eadf3d42574.png
[React Router_Link_NavLink]: https://blog.csdn.net/lhjuejiang/article/details/80366839
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]: /images/20221024/f6744c8530214cf68e23f09557522e03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]: /images/20221024/f5eba96767454e979764259cffb2427f.png
[20210215220103469.png]: /images/20221024/d1f302427d3241fa928bfe3caa8e8ab2.png
[20210215220717943.png]: /images/20221024/c48cda62184a43d48b30b47930acc820.png
[20210215225633845.png]: /images/20221024/cd4a7047129f4f24a939d8e260d3af8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]: /images/20221024/d86e61566cbe4fdc9b8816c39f12df8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 4]: /images/20221024/3a8fe31406404078ad4e0af3b6cb8b77.png
[react-router _history]: https://zhuanlan.zhihu.com/p/20799258?refer=jscss