1、项目初始化
创建项目
npx create-react-app react-router
安装 react-router-dom
npm i react-router-dom
2、快速体验
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider, } from 'react-router-dom'
const router = createBrowserRouter([
{
path: '/login',
element: <div>这是登录页</div>,
},
{
path: '/home',
element: <div>这是首页</div>,
},
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<RouterProvider router={router}></RouterProvider>
</React.StrictMode>
);
3、路由模块化
page/Login/index.js
import React from "react";
const Login = () => {
return <div>这是登录页面</div>
}
export default Login;
page/Home/index.js
import React from "react";
const Home = () => {
return <div>这是主页</div>
}
export default Home;
router/index.js
import React from 'react'
import { createBrowserRouter } from 'react-router-dom'
import Home from '../page/Home'
import Login from '../page/Login'
const router = createBrowserRouter([
{
path: '/login',
element: <Login />,
},
{
path: '/home',
element: <Home />,
},
])
export default router;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
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>
);
3、路由跳转
3.1 声明式跳转
使用 <Link />
<Link to="/home">跳转到主页</Link>
示例：
import React from "react";
import { Link } from 'react-router-dom'
const Login = () => {
return (
<div>
<h1>登录页面</h1>
<Link to="/home">跳转到主页</Link>
</div>
)
}
export default Login;
3.2 编程式跳转
使用 useNavigate()
示例：
import React from "react";
import { useNavigate } from 'react-router-dom'
const Login = () => {
const navigate = useNavigate();
return (
<div>
<h1>登录页面</h1>
<button onClick={() => navigate('/home')}>跳转到主页</button>
</div>
)
}
export default Login;
4、路由传参
4.1 useSearchParams 传参
传参：
navigate('/home?name=xiao&age=11')
接收参数：
const [searchParams] = useSearchParams();
const name = searchParams.get('name');
const age = searchParams.get('age');
示例：
Login/index.js
import React from "react";
import { useNavigate } from 'react-router-dom'
const Login = () => {
const navigate = useNavigate();
return (
<div>
<h1>登录页面</h1>
<button onClick={() => navigate('/home?id=101&name=React')}>路由传参</button>
</div>
)
}
export default Login;
Home/index.js
import React from "react";
import { useSearchParams } from "react-router-dom";
const Home = () => {
const [searchParams] = useSearchParams();
const id = searchParams.get('id');
const name = searchParams.get('name');
return (
<div>
<p>id： {id}</p>
<p>名字： {name}</p>
</div>
)
}
export default Home;
4.2 useParams 传参
路由：
{
path: '/home/:id/:name',
element: <Home />,
}
传参：
navigate('/home/102/react')
获取参数：
const params = useParams();
const { id, name } = params;
示例：
router/index.js
import React from 'react'
import { createBrowserRouter } from 'react-router-dom'
import Home from '../page/Home'
import Login from '../page/Login'
const router = createBrowserRouter([
{
path: '/login',
element: <Login />,
},
{
path: '/home/:id/:name',
element: <Home />,
},
])
export default router;
Login/index.js
import React from "react";
import { useNavigate } from 'react-router-dom'
const Login = () => {
const navigate = useNavigate();
return (
<div>
<h1>登录页面</h1>
<button onClick={() => navigate('/home/102/react')}>路由传参</button>
</div>
)
}
export default Login;
Home/index.js
import React from "react";
import { useParams } from "react-router-dom";
const Home = () => {
const params = useParams();
const { id, name } = params;
return (
<div>
<p>id： {id}</p>
<p>名字： {name}</p>
</div>
)
}
export default Home;
5、嵌套路由
使用方法：
1、使用 children 配置路由嵌套关系
2、使用 <Outlet /> 配置二级路由组件渲染位置
创建 page/Layout/index.js
import React from "react";
import { Link, Outlet } from "react-router-dom";
export const Layout = () => {
return (
<div>
<h1>这是一级路由</h1>
<div>
<Link to="/about">about</Link>
</div>
<div>
<Link to="/detail">detail</Link>
</div>
{/* 二级路由出口 */}
<Outlet />
</div>
)
}
export default Layout;
创建 page/About/index.js
import React from "react";
const About = () => {
return (
<div>
这是 About 组件
</ div>
)
}
export default About;
创建 page/Detail/index.js
import React from "react";
const Detail = () => {
return (
<div>
这是 Detail 组件
</ div>
)
}
export default Detail;
配置路由 router/index.js
import React from 'react'
import { createBrowserRouter } from 'react-router-dom'
import Home from '../page/Home'
import Login from '../page/Login'
import Layout from '../page/Layout'
import About from '../page/About'
import Detail from '../page/Detail'
const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
children: [
{
path: '/about',
element: <About />
},
{
path: '/detail',
element: <Detail />
}
]
},
{
path: '/login',
element: <Login />,
},
{
path: '/home/:id/:name',
element: <Home />,
},
])
export default router;
5.1 默认路由
router/index.js
使用 index
{
path: '/',
element: <Layout />,
children: [
{
// path: '/about',
index: true,
element: <About />
},
{
path: '/detail',
element: <Detail />
}
]
},
Layout/index.js 修改路径：
{/* <Link to="/about">about</Link> */}
<Link to="/">about</Link>