React-Router路由基础篇

🕗 发布于 2024-11-20 14:56 react.js javascript 前端

环境准备：

安装nvm和nrm，详情请看如下链接：

nvm的使用-CSDN博客，nrm的使用-CSDN博客

使用的是React脚手架：Getting Started | Create React App 中文文档

使用的是fusion组件设计：PC 官网 - 首页

使用的是react-router-dom：react-router-dom 中文文档 | 快速开始

正式开始本次使用：

一、安装react-router-dom

打开项目，打开Terminal后输入如下命令：

表示安装成功。

在package.json下有如下信息：

原始src目录下的index.js代码：

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

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

reportWebVitals();

案例1、切换一个可以切换登录页和首页的路由系统

1、在index.js文件下引入React-router的createBrowserRouter和RouterProvider (createBrowserRouter函数是用于创建一个浏览器路由器对象，用来配置应用中的路由；RouterProvider则是一个组件，它主要是将创建的路由器对象提供个整个应用)

import {createBrowserRouter, RouterProvider} from "react-router-dom";

2、在createBrowserRouter中创建router实例对象并配置路由对应关系

const router = createBrowserRouter([
    {
        path: '/login',
        element: <div>我是登录页</div>,
    },
    {
        path: '/home',
        element: <div>我是首页</div>,
    }
])

3、使用RouterProvider组件全局注入router实例

<RouterProvider router={router}>
     <App/>
</RouterProvider>

完整代码如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './page/App/App';
import reportWebVitals from './reportWebVitals';
import {createBrowserRouter, RouterProvider} from "react-router-dom";

const router = createBrowserRouter([
    {
        path: '/login',
        element: <div>我是登录页</div>,
    },
    {
        path: '/home',
        element: <div>我是首页</div>,
    }
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <RouterProvider router={router}>
            <App/>
        </RouterProvider>
    </React.StrictMode>
);

reportWebVitals();

验证：网址栏输入地址http://localhost:3001/login或http://localhost:3001/home.

案例2、对案例1中的登录页和首页进行优化

分别创建登录页和首页如下：

各自的index.js中代码如下：

login目录下的index.js代码如下：

const Login = () => {
    return (
        <div>
            我是登录页
        </div>
    )
}

export default Login

home目录下的index.js代码如下：

const Home = () => {
    return (
        <div>
            我是首页
        </div>
    )
}

export default Home

src下的index.js中createBrowserRouter代码修改如下：

import Login from "./page/login";
import Home from "./page/home";

const router = createBrowserRouter([
    {
        path: '/login',
        element: <Login/>,
    },
    {
        path: '/home',
        element: <Home/>,
    }
])

验证：网址栏输入地址http://localhost:3001/login或http://localhost:3001/home.

anli

案例3、对案例2进一步优化，实现路由默认跳转登录页

对src下的index.js中createBrowserRouter代码修改如下：增加一个默认路由配置

代码如下：

import {createBrowserRouter, Navigate, RouterProvider} from "react-router-dom";

const router = createBrowserRouter([
    {
        path: '/login',
        element: <Login/>,
    },
    {
        path: '/home',
        element: <Home/>,
    },
    {
        path: '/',
        element: <Navigate to={'/login'}/>,/*使用导航的方式实现默认跳转*/
    }
])

此时网址栏输入地址http://localhost:3001就会默认打开登录页。

案例4、对案例3进一步优化，实现点击登录页的按钮跳转到首页(路由导航跳转)

方法1、声明式导航(使用<Link/>组件实现跳转到哪里)

对登录页的index.js进行如下改造

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

const Login = () => {
    return (
        <div>
            我是登录页
            <Link to={'/home'}>点我进入首页</Link>
        </div>
    )
}

export default Login

运行如下：

点击点我进入首页即可进入首页界面。

方法2、编程式导航(使用UseNavigate钩子函数，通过navigate()方法实现跳转)

其中Button用的是fusion组件设计。

import {useNavigate} from "react-router-dom";
import {Button} from "@alifd/next";

const Login = () => {
    const navigate = useNavigate()
    return (
        <div>
            我是登录页
            <Button type={'primary'} onClick={()=>navigate('/home')}>点我进入首页</Button>
        </div>
    )
}

export default Login

运行如下：

点击点我进入首页即可进入首页界面。

案例5、继续对案例4进行优化，实现导航带参的传递

方法1、

使用navigate('/home?id=10000&name=MyTest')传递参数；

使用固定钩子函数useSearchParams接收参数，通过在path路径后面拼上字符串来传递参数。

语法：

navigate('/home?id=10000&name=MyTest');  //拼接字符串传递参数
 
const [params] = useSearchParams();   //通过useSearchParams接收参数
 
const id = params.get('id');  // 获取传递的参数

login的index.js代码如下：

import {useNavigate} from "react-router-dom";
import {Button} from "@alifd/next";

const Login = () => {
    const navigate = useNavigate()
    return (
        <div>
            我是登录页
            <Button type={'primary'} onClick={()=>navigate('/home?id=10000&name=MyTest')}>点我进入首页</Button>
        </div>
    )
}

export default Login

home的index.js代码如下：

import {useSearchParams} from "react-router-dom";

const Home = () => {
    const [params] = useSearchParams();
    console.log("params",params.toString());
    console.log("params.toJson",JSON.stringify(params.toString()));
    const id = params.get('id');
    const name = params.get('name');
    return (
        <div>
            我是首页
            {id}--{name}
        </div>
    )
}

export default Home

运行结果如下：

方法2、

使用固定钩子函数useParams接收参数，通过在path路径后面直接传递参数。

语法：

navigate('/home/10000/MyTest');
 const params = useParams();
 const id = params.id;

login的index.js代码如下：

import {useNavigate} from "react-router-dom";
import {Button} from "@alifd/next";

const Login = () => {
    const navigate = useNavigate()
    return (
        <div>
            我是登录页
            <Button type={'primary'} onClick={() => navigate('/home/10000/MyTest')}>点我进入首页</Button>
        </div>
    )
}

export default Login

src的index.js中Home的路由修改如下：

const router = createBrowserRouter([
    {
        path: '/login',
        element: <Login/>,
    },
    {
        path: '/home/:id/:name?',
        element: <Home/>,
    },
    {
        path: '/',
        element: <Navigate to={'/login'}/>,/*使用导航的方式实现默认跳转*/
    }
])

其中:id表示此参数为必传；:name?表示此参数非必填。