一个路径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
<Link to="/board">面板</Link>
<Link to="about">关于</Link>
{/* 配置二级路由出口 */}
<Outlet/>
</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 >
<Link to="about">关于</Link>
{/* 配置二级路由出口 */}
<Outlet/>
</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
