一、路由的基本使用
// 引入两个组件
import Home from "./Home";
import About from "./About";
import {HashRouter,BrowserRouter, Link, Route, Routes} from "react-router-dom";
// 进行路由配置
function App() {
return (
// 声明当前要用一个菲hash模式的路由
<HashRouter>
{/* 指定跳转的组件 to用来配置路由的地址 */}
<Link to='/'>首页</Link>
<Link to='/about'>关于</Link>
{/* 路由出口 路由对应的组件会在这里进行渲染 */}
<Routes>
{/* 指定路径和组件的对应关系 */}
<Route path='/' element={<Home/>}></Route>
<Route path='/about' element={<About/>}></Route>
</Routes>
</HashRouter>
);
}
export default App
二、编程式导航实现路由跳转
1.基本使用
// 1.导入useNavigate函数
import {useNavigate} from "react-router-dom";
function Login() {
// 2. 执行useNavigate得到一个跳转函数
const navigate = useNavigate()
// 跳转带关于页
let goAbout = () => {
// 3.调用跳转函数传入目标路径 replace不会有历史记录
navigate('/about', {replace: true})
}
return (
<div>
<p>login</p>
<button onClick={goAbout}>跳转到关于页</button>
</div>
)
}
export default Login
2.携带参数
// useSearchParams传参 路由形式:http://localhost:3000/#/about?id=1001
import {useSearchParams} from "react-router-dom";
function About() {
const [params] = useSearchParams()
/*
* params是一个对象 对象里面有一个get方法
* 用来获取对应的参数
* 把参数的名称作为get方法的实参传过来
* */
console.log(params)
const id = params.get('id')
return (
<div>about得到的参数id值为{id}</div>
)
}
export default About
// params传参 路由形式:http://localhost:3000/#/about/1001
import {useParams} from "react-router-dom";
function About() {
const params = useParams()
console.log(params)
return (
<div>about得到的参数id值为{params.id}</div>
)
}
export default About
3.嵌套路由
// Layout.js
import {Outlet} from "react-router-dom";
function Layout(){
return(
<div>
Layout
{/* 二级路由出口 */}
<Outlet></Outlet>
</div>
)
}
export default Layout
// App.js
import Login from "./Login";
import Layout from "./Layout";
import Board from "./Board";
import Article from "./Article";
import { BrowserRouter,Route, Routes} from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<Layout/>}>
{/* 定义二级路由嵌套,同时要在Layoyt.js里配置二级路由出口,否则二级路由内容不会显现*/}
<Route path='board' element={<Board/>}></Route>
<Route path='article' element={<Article/>}></Route>
</Route>
<Route path='/login' element={<Login/>}></Route>
</Routes>
</BrowserRouter>
);
}
export default App
4.默认二级路由设置
{/* 默认二级 添加index属性 把自己的path干掉 */}
<Route index element={<Board/>}></Route>
5.404页面配置
<Route path='*' element={<NotFond/>}></Route>