React:Router路由

ReactRouter引入

在index.js里编辑，创建路由，绑定路由

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from "react-router-dom";
//1、创建router实例对象并配置路由对应关系
const router=createBrowserRouter([{path: '/login',element:<div>我是登录页</div>
},{path: '/article',element: <div>我是文章页</div>}])const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode>{/* { 2、路由绑定} */}<RouterProvider router={router}></RouterProvider></React.StrictMode>
);reportWebVitals();

效果是这样，可以输入路径进入对应页面

ReactRouter抽象路由模块

按照普通开发的流程使用Router，创建page文件夹，在文件夹内部创建Login和Article文件夹，在两个文件夹内部各自创建index.js文件

在 React 项目中，通常已经配置好了 Babel 和 Webpack，因此开发者可以直接在 JS 文件中使用 JSX，而无需额外配置。

然后配置路径和组件的对应关系，创建路由文件夹，在里面创建index.js文件

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

然后在index.js里引入

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from "react-router-dom";
//1、引入router
import router from './router';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode>{/* 2、将router传入RouterProvider */}<RouterProvider router={router}></RouterProvider></React.StrictMode>
);reportWebVitals();

这个page在view里通常叫views

路由导航

比如登录页面，在登录以后就会拿着登录的用户信息传递给下一个路由，打开新页面

有两种方式实现路由导航，一种叫声明式导航，一种叫编程式导航

这是声明式

在Login路由里调用Link组件

import {Link} from 'react-router-dom'
const Login = () => {return <div>我是登录页<Link to='/article'>点我跳转至文章页</Link></div>
}
export default Login

Link被识别为a链接

这是编程式

点击a链接即可跳转到Article页面

绑定点击事件，调用方法进行路由跳转

import { useNavigate } from "react-router-dom"
const Article = () => {const navigate=useNavigate()return <div>我是文章页<button onClick={()=>{navigate('/login')}}>跳转至登陆界面</button></div>
}
export default Article

在路由里传参

两种写法

searchParams传参

把参数以url字符串的格式传入

协议://域名/路径?查询参数#哈希

import { useNavigate } from "react-router-dom"
const Article = () => {const navigate=useNavigate()return <div>我是文章页<button onClick={()=>{navigate('/login')}}>跳转至登陆界面</button><button onClick={()=>{navigate('/login?id=101&name=jack')}}>searchParams传参</button></div>
}
export default Article

获取传递过来的参数params.get()

import { Link } from 'react-router-dom'
import { useSearchParams } from 'react-router-dom'
const Login = () => {const [params] = useSearchParams()const id = params.get('id')const name = params.get('name')return <div>我是登录页<Link to='/article'>点我跳转至文章页id:{id},name:{name}</Link></div>
}
export default Login

params传参

在路由配置的path里加上【:id】加上动态参数才知道你获取的是什么

动态参数（即占位符）

import Login from "../page/Login";
import Article from "../page/Article";
import { BrowserRouter, createBrowserRouter } from "react-router-dom";
const router=createBrowserRouter([{ path: '/login/:id',//动态路由,通过useParams获取element: <Login/>}, {path: '/article',element: <Article/>}
])
export default router

然后在Article路由处直接传递参数101，

import { useNavigate, useParams } from "react-router-dom"
const Article = () => {const navigate = useNavigate()return <div>我是文章页<button onClick={()=>{navigate('/login')}}>跳转至登陆界面</button><button onClick={()=>{navigate('/login?id=101&name=jack')}}>searchParams传参</button><button onClick={()=>{navigate('/login/101')}}>Params传参</button></div>
}
export default Article

在Login页面显示：

import { Link } from 'react-router-dom'
import { useSearchParams } from 'react-router-dom'
import {useParams } from 'react-router-dom'
const Login = () => {const params = useParams()const id = params.idreturn <div>我是登录页<Link to='/article'>点我跳转至文章页id:{id}</Link><div>{id}</div></div>
}
export default Login

如果传递多个数据，可以在url后面接着写：

//Article
import { useNavigate, useParams } from "react-router-dom"
const Article = () => {const navigate = useNavigate()return <div>我是文章页<button onClick={()=>{navigate('/login')}}>跳转至登陆界面</button><button onClick={()=>{navigate('/login?id=101&name=jack')}}>searchParams传参</button><button onClick={()=>{navigate('/login/101/jack')}}>Params传参</button></div>
}
export default Article

//Login
import { Link } from 'react-router-dom'
import { useSearchParams } from 'react-router-dom'
import {useParams } from 'react-router-dom'
const Login = () => {const params = useParams()const id = params.idconst name = params.namereturn <div>我是登录页<Link to='/article'>点我跳转至文章页</Link><div>id:{id}name:{name}</div></div>
}
export default Login

//Router
import Login from "../page/Login";
import Article from "../page/Article";
import { BrowserRouter, createBrowserRouter } from "react-router-dom";
const router=createBrowserRouter([{ path: '/login/:id/:name',//动态路由,通过useParams获取element: <Login/>}, {path: '/article',element: <Article/>}
])
export default router

嵌套路由配置

在嵌套路由中，父级路由就像一个文件夹，子级路由就像文件夹里的文件。要在父级路由中正确显示子级路由的内容，就需要使用<Outlet/>作为二级路由的出口。

在page下创建一个新文件夹充当一级路由：

//layout/index.js
import { Link ,Outlet} from 'react-router-dom'
const Layout = ({}) => { return (<div>我是一级路由layout组件<Link to='/about'>点我跳转至About页</Link>   <Link to='/board'>点我跳转至Board页</Link>   {/* {配置子路由，也就是二级路由的出口} */}<Outlet/></div>)
}
export default Layout

然后再创建两个同级的路由：

//Board
const Board=()  => { return (<div>我是面板</div>)
} 
export default Board
//About
const About=()  => { return (<div>我是一级路由About组件</div>)
} 
export default About

然后配置路由和路径：

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

默认二级路由

默认二级路由就是设置你默认打开展示的路由，设置路由去掉path，设置index为true

import Login from "../page/Login";
import Article from "../page/Article";
import { BrowserRouter, createBrowserRouter } from "react-router-dom";
import Layout  from "../page/Layout";
import About from "../page/About";
import Board from "../page/Board";
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='/about'>点我跳转至About页</Link>   <Link to='/'>点我跳转至Board页</Link>   {/* {配置子路由，也就是二级路由的出口} */}<Outlet/></div>)
}
export default Layout

打开localhost:3000，展示的是二级路由Board

404路由配置

优化用户体验，当浏览器输入的url在整个路由配置中都找不到path，为了用户体验，可以使用404兜底组件进行渲染

编写NotFound路由，创建NotFound文件夹，在里面的index.js编写👇

const NotFound = () => {return <div>页面被老鼠吃掉了</div>
}
export default NotFound 

在路由路径配置处输入【*】，意思是除了已有的路由，之外的任何值都会跳转到404NotFound页面

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

两种路由模式