1.安装插件
javascript
npm install react-router-dom
2.新建文件及页面
在scr/page下新建layout、about、home文件夹,分别在对应的文件夹下新建入口文件index.js;src下新建router文件夹,该文件夹下新建入口文件index.js
3.配置路由
如何配置路由:http://t.csdnimg.cn/dJ8C2
src/router/index.js
javascript
// 1.引入方法,用于创建路由实例
import { createBrowserRouter } from 'react-router-dom'
// 2.引入组件
import LoginPage from '../page/login';
import IndexPage from '../page/index';
import Layout from '../page/layout';
import About from '../page/about';
import Home from '../page/home';
// 3.创建router实例,配置路由
const router = createBrowserRouter([
{
path:"/layout",
element:<Layout></Layout>,
children:[
{
index:true, // 默认显示该路由
element:<About></About>
},
{
path:'/layout/home',
element:<Home></Home>
}
]
},
{
// path:"/login", // searchParams方式传参
path:"/login/:id/:name", // params方式传参
element:<LoginPage></LoginPage> // 渲染页面的地方
},
{
path:"/index",
element:<IndexPage></IndexPage>
},
{
path:"",
element:<div>欢迎来到首页</div>
}
])
// 4.暴露路由实例,用于在App.js主入口组件
export default router;
4.页面编写
src/page/about/index.js
javascript
function About(){
return (
<div>我是about</div>
)
}
export default About
src/page/home/index.js
javascript
function Home(){
return (
<div>我是home</div>
)
}
export default Home
src/page/layout/index.js
javascript
// 说明:该组件作为一级路由渲染页面,Outlet是用于渲染二级路由页面的标签,是固定写法
import { Link, Outlet, useNavigate } from "react-router-dom"
function Layout() {
const navigate = useNavigate()
return (
<div>
<div>我是layout</div>
<button onClick={() => navigate('')}>跳转到about</button>
<Link to="/layout/home">跳转到home</Link>
<Outlet></Outlet>
</div>
)
}
export default Layout
如何跳转路由:http://t.csdnimg.cn/n0Tgr
src/App.js
javascript
import React, { useState, useRef, useEffect, useContext, createContext } from 'react';
// 1.引入
import { RouterProvider } from 'react-router-dom'
import router from './router';
function App() {
return (
<div>
{/* 2.绑定 */}
<RouterProvider router={router}></RouterProvider>
</div>
);
}
export default App;
5.最终效果