React Router 入门-CSDN博客

本文链接：https://blog.csdn.net/m0_59178676/article/details/117775282

在这里插入图片描述
图片来自：https://reactrouter.com/ (若有侵权，联系删除)

路由，是我一直都不太了解的部分，但是在 React 开发网页中，又是经常用到的。碰巧自己的项目又刚好被路由弄得头昏眼胀的，所以，在看了一些大佬的文章和根据 React Router 的文档之后，简单的配置了一下，勉强的满足了现有需求。这篇文章也算是一个 React Router 的入门笔记，后期根据项目的迭代，我也会不断的更新下去的。

我们就用一个简单的示例，来入门 React Router 吧。

初始化工作

首先，我们创建一个项目文件，命名为 router-demo:

// cmd
npx create-react-app router-demo

// 安装好了之后，我们进入项目文件 router-demo，安装 react-router-dom
cd router-demo
npm install react-router-dom -D

为了方便演示，我把 src 文件夹下, 就留两个主要的文件，最后 src 文件夹目录的结构如下：

|-src
  |- index.js
  |- App.js

然后我们在 src 文件夹下，创建 components 文件夹，用于存放待会儿要用到的组件 Home、 List 、User。现在的目录结构：

|-src
  |- components
    |- Home.jsx
    |- List.jsx
    |- User.jsx
  |- index.js
  |- App.js

1. 基本的路由配置

我们就来实现一个单页面应用吧。

单页面应用：只有首次进入页面时，会发生刷新，但是，当切换到其他页面时，页面路径发生了变化，但是不会进行页面刷新。

废话不多说，我们就开始吧：

// App.js
import React from 'react';
// 引入 BrowserRouter 组件
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'; 
import Home from './components/Home';
import List from './components/List';
import User from './components/User';

export default function App() {
    return (
        <Router>
            <div>
                <Link className="li" to={'/'}>Home</Link>
                <Link className="li" to={'/List'}>List</Link>
                <Link className="li" to={'/User'}>User</Link>
            </div>

            <hr />

            <div>
                <Route path="/">
                    <Home />
                </Route>

                <Route path="/List">
                    <List />
                </Route>

                <Route path="/User">
                    <User />
                </Route>
            </div>
        </Router>
    )
};

// Home.js
import React from 'react'

export default function Home() {
    return (
        <div>
            Home
        </div>
    )
}

// List.js
import React from 'react'

export default function List() {
    return (
        <div>
            List
        </div>
    )
}

// User.js
import React from 'react'

export default function User() {
    return (
        <div>
            User
        </div>
    )
}

当我们执行 npm run start 之后，我们可以看到，在下划线的下面，显示了一个 Home，当点击其他的链接时，虽然会显示其他两个组件的输出内容，但是那个 Home 一直在显示着，这当然不是我们想要的结果。那为什么会这样呢？

这是因为路由默认匹配是模糊匹配，只要刚开始匹配上了，那么就会渲染，所以我们需要在 Route 组件上添加 exact 来进行精确匹配。

<Route exact path="/">
    <Home />
</Route>

添加上这个属性之后，我们在点击 List 或者是 User，内容区就不会显示 Home 了。

完成上面这些步骤，一个简单的导航栏就完成啦~ 是不是感觉很简单！

2. 身份验证

不知道大家有没有遇到过这种情况，当你想下载这个资料的时候，突然给你跳转到登入页，让你登入。我自己的项目也在做 登入页跳转到主页，刚开始不是用路由的方式来实现跳转的，一直觉得怪怪的，但是又不知道怎么办，后面看到了官网的示例，然后结合了自己的代码，终于解决了这个问题啦，现在就来看看怎么实现吧：

开始工作：

在开始前，我们先在 components 文件夹下，新建一个 Login.jsx，用于编写登入模块的代码。
然后在 src 文件夹下，新建一个 Route 文件夹，并且在 Route 文件夹下新建 Redirect.jsx，用来编写自己的路由。
我们还需要在 Route 文件夹下，新建一个 LoginState.js 文件，原来管理登入状态。
完成上述工作之后，我们的目录结构应该是这样的：

|-router-demo
  |- src
    |- index.js
    |- App.js
    |- components
      |- Home.jsx
      |- User.jsx
      |- List.jsx
      |- Login.jsx
    |- Route
      |- Redirect.jsx
      |- LoginState.js

开始编写代码：

// Route/LoginState.js
export const LoginStatus = {
    isLogin: false,
    changeLoginStatus(callback) {
        this.isLogin = true;
        callback();
    }
}

// Route/Redirect.jsx
import React from 'react';
import {useLocation, Route, Redirect} from 'react-router-dom';
import {LoginStatus} from './LoginState';
export default function MyRedirect({component:Component, ...rest}) {
    const location = useLocation();
    return (
        <Route {...rest}>
            {
                LoginStatus.isLogin ? <Component /> : <Redirect to={{pathname: "/Login", state: {from: location}}}/>
            }
        </Route>
    );
}

// components/Login.jsx
import React, {useState} from 'react';
import {useLocation, Redirect} from 'react-router-dom';
import {LoginStatus} from '../Route/LoginState';

export default function Login() {
    const {state} = useLocation();
    const {from} = state || {from: {pathname: '/'}};
    const [LoginState, changeLoginState] = useState(false);
    if(LoginState) {
        return <Redirect to={from} />
    }
    return (
        <div>
            <div>需要访问 {from.pathname.replace('/', '')} 需要先登入</div>
            <button onClick={
                ()=> {
                    LoginStatus.changeLoginStatus(()=> {
                        changeLoginState(true)
                    })
                }
            }>登入</button> 
        </div>
    )
}

// App.jsx
import React from 'react';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'; 
import Home from './components/Home';
import List from './components/List';
import User from './components/User';
import Login from './components/Login';
import Redirect from './Route/Redirect';

export default function App() {
    return (
        <Router>
            <div>
                <Link className="li" to='/'>Home</Link>
                <Link className="li" to='/List'>List</Link>
                <Link className="li" to='/User'>User</Link>
            </div>
            <hr />
            <div>
                <Route exact path="/">
                    <Home />
                </Route>

                <Route path="/List">
                    <List />
                </Route>

                <Route path="/Login">
                    <Login />
                </Route>

                <Redirect path="/User" component={User} />
            </div>
        </Router>
    )
};