React路由笔记（函数组件，自用）

本文主要是介绍React路由笔记（函数组件，自用），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

配置

npm i react-router-dom

基本使用

目录结构

在src中创建page文件夹放置各页面组件，router中放置路由
目录结构

1、router中配置路由

在/router/index.js中，使用createBrowserRouter配置路由。

import { createBrowserRouter } from "react-router-dom";import Login from '../page/Login';
import Article from "../page/Article";const router = createBrowserRouter([{path: '/login',element: <Login/>},{path: 'Artical',element: <Article/>}
])export default router;

2、在使用路由组件的地方包裹（这里在index.js中）

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';import { RouterProvider } from 'react-router-dom';
import router from './router';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><RouterProvider router={router}></RouterProvider></React.StrictMode>
);
reportWebVitals();

3、路由跳转

3.1 声明式导航

引入Link标签，包裹需要导航的按钮，使用参数to绑定需要跳转到的路由

3.2 编程式导航

使用useNavigate钩子。这个比较灵活，可以在js代码中写

二者的用法

import React from 'react';
import { Link, useNavigate } from 'react-router-dom';const Login = () => {const navigate = useNavigate()return (  <React.Fragment><div>登录页</div>{/* 声明式 */}<Link to="/article">跳转到文章页</Link>{/* 编程式 */}<button onClick={()=> navigate('/article')}>跳转到文章页</button></React.Fragment>);
}export default Login;

4 传参

4.1 searchParams传参

传参使用?key1=value1&key2=value2
接收参数时，用useSearchParams钩子

import React from 'react';
import { Link, useNavigate } from 'react-router-dom';const Login = () => {const navigate = useNavigate()return (  <React.Fragment><div>登录页</div><Link to="/article?id=123&name=test">跳转到文章页（带参数）</Link><button onClick={()=> navigate('/article/1001')}>跳转到文章页（params传参）</button></React.Fragment>);
}export default Login;

接受参数

import React from 'react';
import { useSearchParams } from 'react-router-dom';const Article = () => {const [params] = useSearchParams();const id = params.get('id');const name = params.get('name')return ( <div>文章页<div>id: {id},name: {name}</div></div> );
}export default Article;

4.2 params传参

传参时，/article/1001
接收时，用useParams钩子
这种传参需要在route中加上参数声明

import { createBrowserRouter } from "react-router-dom";import Login from '../page/Login';
import Article from "../page/Article";const router = createBrowserRouter([{path: '/login',element: <Login/>},{path: '/article/:id',element: <Article/>}
])export default router;

传参同理，接收代码如下

import React from 'react';
import { useParams, useSearchParams } from 'react-router-dom';const Article = () => {// const [params] = useSearchParams();// const id = params.get('id');// const name = params.get('name')const params = useParams();const id = params.id;return ( <div>文章页<div>id: {id},</div></div> );
}export default Article;

5、嵌套路由

1、在router中使用children配置子路由

import { createBrowserRouter } from "react-router-dom";import Layout from "../page/Layout";
import Board from "../page/Board";
import About from "../page/About";const router = createBrowserRouter([{path: '/',element: <Layout/>,children: [{path: 'board',element: <Board/>},{path: 'about',element: <About/>}]}
])export default router;

2、使用<Outlet/>组件配置二级路由的位渲染置
例如，根组件是<Layout/>，在Layout中：

import { Link, Outlet } from "react-router-dom";const Layout = () => {return ( <div><div>一级路由</div><div><Link to="/board">面板</Link></div><div><Link to="/about">关于</Link></div>{/* 配置二级路由的出口 */}<Outlet/></div>);
}export default Layout;

若需要二级路由的默认展示页，则在router中不添加path，增加index: true即可。例：

import { createBrowserRouter } from "react-router-dom";import Layout from "../page/Layout";
import Board from "../page/Board";
import About from "../page/About";const router = createBrowserRouter([{path: '/',element: <Layout/>,children: [{index: true,element: <Board/>},{path: 'about',element: <About/>}]}
])export default router;

同时，<Link/>中的to也需要同步更改为/
此时，<Board/>默认显示

6、404配置

在路由表的末尾配置

  {path: '*',element: <NotFound/>}

7、路由模式设置

配置路由时，用createBrowserRouter就是history路由，用createHashRouter是hash路由，其他一致。

import { createBrowserRouter } from "react-router-dom";   // history路由
import { createHashRouter } from "react-router-dom";  // hash路由const router = createHashRouter([])export default router;