React v6 界面路由

注意React版本！v6和以前是有区分的，本文讲解的是v6版本的路由规则

一、环境配置

使用React路由需要引入路由包：react-router-dom

npm install react-router-dom 

二、基本路由

基本路由的实现依赖几个组件：Router、Routes、Route、Navigate、Link

下面分别介绍这几个组件

1、Router

react-router 的工作方式，是在组件树顶层放一个 Router 组件，然后在组件树中散落着很多 Route 组件（注意比 Router 少一个“r”），顶层的 Router 组件负责分析监听 URL 的变化，在它之下的 Route 组件可以直接读取这些信息。Router 是“提供者”，Route是“消费者”。

直白点就是Router是爷爷，在最上层，一个React网站只有一个Router

而Router有两种：HashRouter、BrowserRouter

关于两者的区别主要是他们的工作方式不同：

• BrowserRouter它利用HTML5 的history API来同步URL和UI的变化（新版）
• HashRouter利用Url中锚点后面的值的hashChange事件来同步Url的变化（旧版）

本文后面的例子将使用HashRouter实现

2、Routes、Route、Navigate

他们是实现路由的主力军

Routes相当于爸爸 Route是儿子，Routes包裹Route（Routes就相当于旧版的Switch）

在新版本中Route必须被Routes包裹不然会有问题

<Routes>
    <Route path='/index' element={<Index />} />
    <Route path='/news' element={<news />} />
</Routes>

Navigate的作用是重定向，可以通过Navigate组件来实现404Nof Found页面

<Routes>
    <Route exact={true} path='*' element={<Navigate push to='/404' />} />
    <Route path='/index' element={<Index />} />
    <Route path='/news' element={<news />} />
    {/* 404页面 */}
    <Route path='/404' element={<NotFound />}></Route>
</Routes>

3、Link

规定好路由后就要定义路由的跳转了，Link就相当于一个a标签，能够通过点击这个a标签进行跳转

通常Link写在具体的某个页面，而路由一般枚举在某个Router.js中

<Link to="/news" >
    新闻
</Link>

这个展示在页面就是一个a标签的样式，点击他会跳转到上方规定的路由地址

通过Link和上方的路由组件即可实现路由功能

路由的简单实现

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Ruters from './Ruters'
import reportWebVitals from './reportWebVitals';

import Index from './pages/index'
import { HashRouter, Routes, Route, Link } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Ruters/>
  </React.StrictMode>
);

Router.js

import Others from './pages/others';
import NotFound from './pages/notfound';
import { HashRouter, Routes, Route, Navigate } from "react-router-dom";

const Ruters = () => {
    return (
        <HashRouter>
            <Routes>
                <Route exact={true} path='*' element={<Navigate push to='/404' />} />
                <Route path='/'>
                    {/* 默认路由 */}
                    <Route index element={<Index />} />

                    <Route path='news' element={<News />} />
                    <Route path='others' element={<Others />} />
                    <Route path='jerry'>
                        {/* 默认路由 */}
                        <Route index element={<Others />} />
                        <Route path='news' element={<News />} />
                    </Route>
                </Route>
                {/* 404页面 */}
                <Route path='/404' element={<NotFound />}></Route>
            </Routes>
        </HashRouter>
    )
}

 index.js

import { Link, useNavigate } from "react-router-dom";


const Index = () => {
    const navigate = useNavigate()
    return (
        <div>
            <h1>hello，你们好</h1>
            <ul>
                <li>
                    <Link to="/news" >
                        新闻
                    </Link>
                </li>
                <li>
                    <Link to="/others" state={{name:"123"}}>
                        其他
                    </Link>
                </li>
                <li>
                    <Link to="/jerry">
                        其他其他
                    </Link>
                </li>
                <li>
                    <Link to="/jerry/news">
                        其他新闻
                    </Link>
                </li>
            </ul>
        </div>
    )
}

三、参数传递

定义好路由后，会有参数传递的需求

这里讲解两种常用的传递方式：Link标签传递、代码参数传递

1、Link标签传递

<Link to="/others" state={{name:"123"}}>
    其他
</Link>

直接把需要传递的参数写在state中

而接受参数的页面需要从location中获取

const location = useLocation();

const { state } = location;

2、代码参数传递

代码参数传递主要用到dom的hook：useNavigate

通过useNavigate来重定向到指定页面

const navigate = useNavigate();
// 路由跳转
navigate('/others',{ state: { name: "112" } })

import { Link,useNavigate } from "react-router-dom";

const News = () => {
    const navigate = useNavigate();

    const btnOnClick = () => {
        const input = document.getElementById("name");
        const inputValue = input.value;
        // 路由跳转
        navigate('/others',{ state: { name: inputValue } })
    }

    return (
        <div>
            新闻界面
            <input id="name"></input>
            <button onClick={btnOnClick}>点我携带参数进入其他界面</button>
        </div>
    )
}

export default News;

同样的接受参数的组件用useLocation获取

const location = useLocation();

const { state } = location;

四、文末

这个demo有需要的可以找我免费拿