ReactRouter与 Redux
ReactRouterV6.4
npm i react-router-dom
npm install sass
src/App.js
// import logo from './logo.svg';
import './App.css';
import { Link, Outlet } from 'react-router-dom';
function App() {
return (
<div className="App">
<h2>react</h2>
<Link to="/">首页</Link> | <Link to="/about">关于</Link>
<Outlet />
</div>
);
}
export default App;
src/router/index.js
import { createBrowserRouter } from "react-router-dom"
import Home from "../views/Home/Home"
import About from "../views/About/About"
import Foo from "../views/Foo/Foo"
import Bar from "../views/Bar/Bar"
import App from '../App'
const routes = [
{
path: '/',
element: <App />,
children: [
{
path: '',
element: <Home />
},
{
path: 'about',
element: <About />,
children: [
{
path: 'foo',
element: <Foo></Foo>
},
{
path: 'bar',
element: <Bar></Bar>
}
]
}
]
}
]
const router = createBrowserRouter(routes)
export default router
动态路由与编程式路由模式
src/router/index.js
{
path: 'foo/:id',
element: <Foo></Foo>
},
src/views/Foo/Foo.jsx
import React from 'react'
import './Foo.scss'
import { useParams } from 'react-router-dom'
export default function Foo() {
const params=useParams()
return (
<div>Foo,{params.id}</div>
)
}
src/views/About/About.jsx
import React from 'react'
import { Link, Outlet, useNavigate } from 'react-router-dom'
import './About.scss'
export default function About() {
const naviegate=useNavigate()
const handleClick=()=>{
naviegate('/about/bar')
}
return (
<div>
<h3>About</h3>
{/* <Link to='/about/foo'>foo</Link> | <Link to='/about/bar'>bar</Link> */}
<Link to='/about/foo/123'>foo123</Link> | <Link to='/about/foo/456'>foo456</Link>
<button onClick={handleClick}>跳转到bar</button>
<Outlet></Outlet>
</div>
)
}
useLocation与useSearchParams
src/views/Bar/Bar.jsx
import React from 'react'
import { useLocation, useSearchParams } from 'react-router-dom'
import './Bar.scss'
export default function Bar() {
const location = useLocation()
console.log(location)
const [searchParams, setSearchParams] = useSearchParams()
console.log(searchParams.get('username'))
// const handleClick = () => {
// setSearchParams({ age: 20 })
// }
// return <div onClick={handleClick}>Bar</div>
return <div>Bar</div>
}
默认路由展示与重定向路由与 404 页面
src/router/index.js
import { createBrowserRouter, Navigate } from "react-router-dom"
import Home from "../views/Home/Home"
import About from "../views/About/About"
import Foo from "../views/Foo/Foo"
import Bar from "../views/Bar/Bar"
import App from '../App'
const routes = [
{
path: '/',
element: <App />,
errorElement:<div>404</div>,
children: [
{
path: '',
element: <Home />
},
{
path: 'about',
element: <About />,
children: [
{
index: true,
// element:<div>默认的内容</div>
element:<Navigate to="/about/foo/123"></Navigate>
},
{
path: 'foo/:id',
element: <Foo></Foo>
},
{
path: 'bar',
element: <Bar></Bar>
},
{
path:"*",
element:<div>404</div>
}
]
}
]
}
]
const router = createBrowserRouter(routes)
export default router
路由 loader 函数与 redirect 方法
src/router/index.js
{
path: 'bar',
element: <Bar></Bar>,
loader: async () => {
let ret = await new Promise((resolve) => {
setTimeout(() => {
resolve({ errorcode: Math.random() > 0.5 ? 0 : -1 })
}, 1000)
})
if(ret.errorcode===0){
return ret
}
else{
console.log('/home')
return redirect('/')
}
},
},
src/views/Bar/Bar.jsx
import React from 'react'
import { useLoaderData } from 'react-router-dom'
import './Bar.scss'
export default function Bar() {
const data = useLoaderData()
console.log(data)
return <div>Bar</div>
}
自定义全局守卫与自定义元信息
src/components/BeforeEach.jsx
import React from 'react'
import { matchRoutes, Navigate, useLocation } from 'react-router-dom'
import { routes } from '../router'
export default function BeforeEach(props) {
const location = useLocation()
console.log('beforeEach')
const matchs = matchRoutes(routes, location)
// console.log('
标签:count,react,const,RTK,React,state,import,Foo,路由
From: https://www.cnblogs.com/hwq1009/p/17059000.html