Premisa: Este documento describe principalmente el uso de router6 en componentes funcionales
1. El uso de router6
descargar
npm install react-router-dom
archivo index.js
// 从 react-dom/client 引入 ReactDOM
import ReactDOM from 'react-dom/client'
//引入BrowserRouter
import {
BrowserRouter } from 'react-router-dom'
import App from './App'
ReactDOM.createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>
)
Además , la diferencia entre ambos es la siguiente <BrowserRouter>:<HashRouter>
1. Los principios subyacentes son diferentes:
BrowserRouter utiliza la API de historial de H5
HashRouter usa el valor hash de la URL
2. La expresión de camino es diferente
No hay # en la ruta de BrowserRouter, como localhost:3000/add
La ruta de HashRouter contiene #, por ejemplo localhost:3000/#/add
3. El impacto en los parámetros de estado de enrutamiento después de la actualización
BrowserRoute no tiene efecto porque el estado se almacena en el objeto de historial
El parámetro de estado de enrutamiento se pierde después de actualizar el HashRouter
Cómo crear rutas
1. Uso básico del enrutamiento
import {
NavLink, Routes, Route, Navigate } from 'react-router-dom'
import About from './components/About.jsx'
import Home from './components/home.jsx'
import Children from "../components/children.jsx"
export default function App() {
return (
<div>
<NavLink to="/home">Home</NavLink>
<NavLink to="/about">About</NavLink>
<Routes>
<Route path="/home" element={
<Home />}>
{
/*嵌套路由（子路由）*/}
<Route path="/about" element={
<About />}></Route>
</Route>
<Route path="/about" element={
<About />}></Route>
<Route path="/" element={
<Navigate to="/home" />}></Route>
</Routes>
</div>
)
}
<Navigate>: Siempre que <Navigate>se represente el componente, se modificará la ruta y se cambiará la vista. Se puede usar para la redirección de enrutamiento, configurando la página de enrutamiento predeterminada para ingresar a la página.
2. Crear una tabla de enrutamiento
// 路由表
// routes/index.js
import {
Navigate } from 'react-router-dom'
import About from '../components/About.jsx'
import Home from '../components/home.jsx'
import Children from "../components/children.jsx"
import
const routes = [
//路由重定向
{
path: '/',
element: <Navigate to="/home" />,
},
{
path: '/home',
element: <Home />,
//创建子路由
children:[
{
path:"children",
element:<Children/>
}
]
},
{
path: '/about',
element: <About/>,
},
]
export default routes
Monte la ruta en App.jsx
//App.jsx
import {
NavLink,useRoutes} from 'react-router-dom'
import About from './components/About.jsx'
import Home from './components/home.jsx'
//引入路由表
import routes from './router';
export default function App() {
//生成路由规则
const route=useRoutes();
return (
<div>
<NavLink to="/home">Home</NavLink>
<NavLink to="/about">About</NavLink>
<div className="content">
//在要显示路由页面的地方挂载路由
{
route}
</div>
</div>
)
}
Rutas anidadas (subrutas)
import React, {
Fragment } from 'react'
import {
NavLink,Outlet} from 'react-router-dom'
export default function Home() {
return (
<Fragment>
<NavLink to="/home/children">children</NavLink>
<Outlet/>
</Fragment>
)
}
<Outlet>: Establecer la salida del subenrutamiento, es decir, dónde renderizar el subenrutamiento
2. Parámetros de enrutamiento
Pasar el parámetro params
Declarar parámetros al registrar rutas
{
path: '/about /:id',
element: <About/>,
},
pasar parámetros
<NavLink to={
`/about/children/${
id}>children</NavLink>
Use useParms() para recibir parámetros
import React from 'react'
import {
useParams} from 'react-router-dom'
export default function Children() {
const {
id}=useParams();
return (
<div>About:{
id}</div>
)
}
Pasar el parámetro de búsqueda
registro
{
path: '/about',
element: <About/>,
},
pasar parámetros
<NavLink to={
`/about/children?id=${
id}&message=${
message}`}>children</NavLink>
Se utiliza useSearchParams()para recibir parámetros. El método devuelve una matriz con dos elementos: searchel parámetro y searchel método que modifica el parámetro.
import React from 'react'
import {
useSearchParams } from 'react-router-dom'
export default function Children() {
const [searchParams,setSearchParms]=useSearchParams();
//获取相对应的值
const id=searchParams.get('id');
const message=searchParams.get('message');
function change() {
setSearchParams('id=2&message=ccc')
}
return (
<div>About
{
id}:{
message}
<button onClick={
change}>Change search params</button>
</div>
)
}
Pasar el parámetro de estado
registro
{
path: '/about',
element: <About/>,
},
pasar parámetros
<NavLink to="/about/children" state={
{
id:id,message:message}}>children</NavLink>
Se utiliza useLocation()para recibir parámetros. Este método devuelve locationel objeto del componente de enrutamiento
import React from 'react'
import {
useParams} from 'react-router-dom'
export default function Children() {
const {
state: {
id,message },
} = useLocation();
return (
<div>{
id}:{
message}</div>
)
}
useLocation() contiene el contenido como se muestra a continuación
3. Salto de enrutamiento
método uno
<NavLink to="/home">Home</NavLink>
Método 2: useNavegar()
import React, {
Fragment } from 'react'
import {
NavLink,Outlet,useNavigate} from 'react-router-dom'
export default function Home() {
const navigate=useNavigate();
const linkTo=()=>{
navigate("/home/children",{
replace:false,
state:{
id:id,
message:message
}
})
}
const back=()=>{
//后退
navigate(1);
//前进
//navigate(-1);
}
return (
<Fragment>
<Button onClick={
linkTo}>children</Button>
<Button onClick={
back}>children</Button>
<Outlet/>
</Fragment>
)
}
useNavigate()Devuelve una función a la que se puede llamar para implementar la navegación de ruta programática. Hay dos formas de pasar parámetros a una función.
La primera forma pasa dos parámetros: ruta y parámetros relacionados. Los parámetros solo se pueden configurar replacey state. Quiere pasar los parámetros paramsy searchdirectamente en la tira de ruta.
La segunda forma pasa un número que representa unos pocos pasos hacia adelante o hacia atrás.