React基础之ReactRouter

青红光硫化黑

于 2025-03-07 09:51:58 发布

阅读量856

点赞数 13

文章标签： react.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/m0_73035591/article/details/146087267

版权

一个路径path对于一个组件component，当我们在浏览器中访问一个path的时候，path对于的组件会在页面中渲染

npm i react-router-dom

抽象路由模块

在src下创建一个router目录，创建一个index.js入口文件

import Login from "../page/Login";

import Article from "../page/Article";

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

const router=createBrowserRouter([

{

path:'/login',

element: <Login/>

{

path:'/article',

element: <Article/>

}

])

export default router

page下创建不同的组件文件夹

Article下的index.js与Login下的index.js差不多

const Login=()=>{

return <div>我是登录页</div>

}

export default Login

然后再src下的index.js入口文件中，使用该路由

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

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();

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

路由导航

由一个组件跳转到另外一个组件

1.声明式导航

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

const Login=()=>{

return(

<div>

我是登录页

<Link to="/article">跳转到文章页</Link>

</div>

)

}

export default Login

2.编程式导航

调用useNavigate钩子得到导航方法，通过调用方法以命令式的形式进行路由跳转

import { useNavigate } from "react-router-dom"

const Login=()=>{

const navigate=useNavigate()

return(

<div>

我是登录页

<button onClick={()=>navigate('/article')}>跳转到文章页</button>

</div>

)

}

export default Login

路由传参

方法1.saerchParams传参

传入参数

import { useNavigate } from "react-router-dom"

const Login=()=>{

const navigate=useNavigate()

return(

<div>

我是登录页

<button onClick={()=>navigate('/article')}>跳转到文章页</button>

<button onClick={()=>navigate('/article?id=1001&name=jack')}>searchParams传参</button>

</div>

)

}

export default Login

接收参数

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

const Article=()=>{

const [params]= useSearchParams()

const id=params.get('id')

const name=params.get('name')

return <div>我是文章页,{id},{name}</div>

}

export default Article

方法2 params传参

注意：需要在路由配置中设置对应的参数映射

传入参数

import { useNavigate } from "react-router-dom"

const Login=()=>{

const navigate=useNavigate()

return(

<div>

我是登录页

<button onClick={()=>navigate('/article')}>跳转到文章页</button>

<button onClick={()=>navigate('/article/1001/jack')}>params传参</button>

</div>

)

}

export default Login

路由中配置映射

import Login from "../page/Login";

import Article from "../page/Article";

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

const router=createBrowserRouter([

{

path:'/login',

element: <Login/>

{

path:'/article/:id/:name',

element: <Article/>

}

])

export default router

接收参数

import { useParams, useSearchParams } from "react-router-dom"

const Article=()=>{

const params= useParams()

const id=params.id

const name=params.name

return <div>我是文章页,{id},{name}</div>

}

export default Article

路由嵌套

1.在路由配置中配置配置一级路由与它的Children

import Login from "../page/Login";

import Article from "../page/Article";

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.在一级路由处，配置二级路由出口

import { Link, Outlet } from "react-router-dom"

const Layout=()=>{

return(

<div>

我是一级路由Layout

{/* 配置二级路由出口 */}

</div>

)

}

export default Layout

默认二级路由配置

也就是已进入到这个一级路由，就会显示这个二级路由的渲染，但是路径不发生变化

index的路由配置为

import Login from "../page/Login";

import Article from "../page/Article";

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

一级路由Layout为

import { Link, Outlet } from "react-router-dom"

const Layout=()=>{

return(

<div>

我是一级路由Layout

<Link to="/">面板</Link>

{/* 配置二级路由出口 */}

</div>

)

}

export default Layout

404路由配置

浏览器中的url路径在整个路由配置中找不到，我们就可以配置404兜底路由

1.设置一个NotFound组件

const NotFount=()=>{

return (

<div>页面消失了</div>

)

}

export default NotFount

2.在路由配置中添加path为*的路由配置项

import Login from "../page/Login";

import Article from "../page/Article";

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

import NotFount from "../page/NotFound";

const router=createBrowserRouter([

{

path:'*',

element:<NotFount />

}

])

export default router

两种路由模式

也有history与hash两种模式

只需要将之前使用的 createBrowserRouter 修改成

createHashRouter

import Login from "../page/Login";

import Article from "../page/Article";

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

import Layout from "../page/Layout";

import Board from "../page/Board";

import About from "../page/About";

import NotFount from "../page/NotFound";

const router=createHashRouter([

{

path:'/',

element:<Layout />,

children:[

{

// 默认二级路由设置

index:true,

element:<Board/>

{

path:'about',

element:<About/>

}

]

{

path:'/login',

element: <Login/>

{

path:'/article/:id/:name',

element: <Article/>

{

path:'*',

element:<NotFount />

}

])

export default router