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
两种路由模式
