React - Router的基本使用介绍

Posted 2023-04-08 学全栈的灌汤包

文章目录

• • Router的基本使用介绍
  • • 认识React-Router
    • Router的组件API
    • Router的映射配置
    • Router配置和跳转
    • Navigate组件使用
    • Not Found页面配置

Router的基本使用介绍

认识React-Router

目前前端流行的三大框架, 都有自己的路由实现:

Angular的ngRouter

React的ReactRouter

Vue的vue-router

React Router在最近两年版本更新的较快，并且在最新的React Router6.x版本中发生了较大的变化。

目前React Router6.x已经非常稳定，我们可以放心的使用;

说明一下, Router4.x和Router5.x的区别是不大的, 而Router6.x就有些区别, 所以Router系列的文章主要针对Router6.x进行讲解, 当有与4或5版本不同的地方时会单独强调

安装React Router:

安装时，我们选择安装react-router-dom, npm install react-router-dom;

因为react-router会包含一些react-native的内容，web开发并不需要;

---

Router的组件API

react-router最主要的API是给我们提供的一些组件:

BrowserRouter或HashRouter

Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件;

BrowserRouter使用history模式;

import React from "react"
import ReactDOM from "react-dom/client"
import  BrowserRouter  from "react-router-dom"
import App from "./App"

const root = ReactDOM.createRoot(document.querySelector("#root"))

root.render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>
)

HashRouter使用hash模式

import React from "react"
import ReactDOM from "react-dom/client"
import  HashRouter  from "react-router-dom"
import App from "./App"

const root = ReactDOM.createRoot(document.querySelector("#root"))

root.render(
  <HashRouter>
    <App/>
  </HashRouter>
)

---

Router的映射配置

Routes:包裹所有的Route，在其中匹配一个路由

Router6.x使用的是Routes组件

Router5.x使用的是Switch组件

Route:Route用于路径的匹配;

Router6.x不允许Router组件单独存在

path属性: 用于设置匹配到的路径;

element属性: 设置匹配到路径后，渲染的组件;

• Router5.x使用的是component属性

exact: 精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件;

• Router6.x不再支持该属性

<div className='app'>
  <div className='header'>header</div>
  
  <div className='counter'>
    <Routes>
      <Route path='/' element=<Home/>/>
      <Route path='/about' element=<About/>/>
      <Route path='/profile' element=<Profile/>/>
    </Routes>
  </div>
  
  <div className='footer'>footer</div>
</div>

---

Router配置和跳转

Link组件:

通常路径的跳转是使用Link组件，这个组件最终会被渲染成a元素;

NavLink是在Link基础之上增加了一些样式属性(后续会讲解);

to属性: Link中最重要的属性，用于设置跳转到的路径

例如实现上面代码, 我们在header中实现点击按钮切换页面的效果

<div className='app'>
  <div className='header'>
    <Link to="/">首页</Link>
    <Link to="/about">关于</Link>
    <Link to="/profile">我的</Link>
  </div>

  <div className='counter'>
    <Routes>
      <Route path='/' element=<Home/>/>
      <Route path='/about' element=<About/>/>
      <Route path='/profile' element=<Profile/>/>
    </Routes>
  </div>

  <div className='footer'>footer</div>
</div>

NavLink组件

需求:路径选中时，对应的a元素的文字变为红色

这个时候，我们要使用NavLink组件来替代Link组件, NavLink组件选中时, 有添加一个类(这个组件了解即可, 不如自己控制更方便):

事实上在默认匹配成功时，NavLink就会动态的添加上一个class: active , 选中的时候就会添加;

所以我们也可以直接编写样式

当然，如果你担心这个class在其他地方被使用了，出现样式的层叠，也可以自定义class和动态添加样式

style属性: 传入一个函数，函数的参数接收一个对象，该对象包含isActive属性

<NavLink to="/" style=( isActive ) => (color: isActive ? "red" : "")>首页</NavLink>
<NavLink to="/about" style=( isActive ) => (color: isActive ? "red" : "")>关于</NavLink>
<NavLink to="/profile" style=( isActive ) => (color: isActive ? "red" : "")>我的</NavLink>

className:传入一个函数，函数的参数接受一个对象，该对象包含isActive属性

<NavLink to="/" className=( isActive ) => isActive ? "my-class" : "">首页</NavLink>
<NavLink to="/about" className=( isActive ) => isActive ? "my-class" : "">关于</NavLink>
<NavLink to="/profile" className=( isActive ) => isActive ? "my-class" : "">我的</NavLink>

---

Navigate组件使用

Navigate用于路由的重定向，当这个组件出现时，就会执行跳转到对应的to路径中:

我们这里使用这个的一个案例:

用户跳转到Profile界面;

但是在Profile界面有一个isLogin用于记录用户是否登录:

• true: 表示已登录, 跳转到首页;
• false: 表示未登录, 显式登录按钮;

export class Profile extends PureComponent 
  constructor(props) 
    super(props)

    this.state = 
      isLogin: false
    
  

  login() 
    this.setState(
      isLogin: true
    ) 
  

  render() 
    const  isLogin  = this.state
    console.log(isLogin)

    return (
      <div>
        <h2>Profile</h2>
        /* 为true时重定向到首页 */
        isLogin ? <Navigate to="/home" /> : <button onClick=() => this.login()>登录</button>
      </div>
    )
  

我们也可以在匹配到 “/” 的时候，直接跳转到 “/home” 页面

<Routes>
  /* 当默认路径 / 时, 重定向到home页面 */
  <Route path='/' element=<Navigate to="/home"/>></Route>
  <Route path='/home' element=<Home/>/>
  <Route path='/about' element=<About/>/>
  <Route path='/profile' element=<Profile/>/>
</Routes>

---

Not Found页面配置

如果用户随意输入一个地址，该地址无法匹配，那么在路由匹配的位置将什么内容都不显示。

很多时候，我们希望在这种情况下，让用户看到一个Not Found的页面。

这个过程非常简单:

开发一个Not Found页面;

配置对应的Route，并且设置path为*即可;

<Routes>
  /* 当默认路径 / 时, 重定向到home页面 */
  <Route path='/' element=<Navigate to="/home"/>></Route>
  <Route path='/home' element=<Home/>/>
  <Route path='/about' element=<About/>/>
  <Route path='/profile' element=<Profile/>/>
  /* 当上面路径都没有匹配到时, 显式Notfound组件 */
  <Route path='*' element=<Notfound/>/>
</Routes>

关于react-router最新版本的使用

现在react-router已经更新到了5.1.1版本，在一些使用方法上较之前有了很多改变，现做初步列举，以后会陆续更新。

关于引入react-router和基本使用

旧版本中引入react-router的方式先安装:

npm install --save react-router

然后引入：

import { Router, Route, Link } from 'react-router'

而现在需要安装react-router-dom包：

npm install react-router-dom

然后引入：

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

需要值得注意的一点是，旧版本可以引入react-router包和react-router-dom包其中之一，而现在若是引入前者，在使用Link时则会报错：

关于Link的使用，现行版本要求必须置于内，且也必须置于内，如果没有,则其他路由不会覆盖默认路由，即其它页面切换时，默认页面仍然存在：

所以，必必可少的，现配上代码：

import React from "react";
import '../src/scss/App.scss';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from '../src/components/Home';
import About from '../src/components/About';
import Users from '../src/components/Users';

 function App() {
  return (
    <Router className="App">
      <div className="App-header">
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;