Prémisse : ce document décrit principalement l'utilisation de router6 dans les composants fonctionnels
1. L'utilisation de router6
télécharger
npm install react-router-dom
fichier 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>
)
De <BrowserRouter>plus <HashRouter>, la différence entre les deux est la suivante :
1. Les principes sous-jacents sont différents :
BrowserRouter utilise l'API d'historique de H5
HashRouter utilise la valeur de hachage de l'URL
2. L'expression du chemin est différente
Il n'y a pas de # dans le chemin de BrowserRouter, tel que localhost:3000/add
Le chemin de HashRouter contient #, par exemple localhost:3000/#/add
3. L'impact sur les paramètres d'état de routage après l'actualisation
BrowserRoute n'a aucun effet car l'état est stocké dans l'objet historique
Le paramètre d'état de routage est perdu après l'actualisation du HashRouter
Comment créer des itinéraires
1. Utilisation de base du routage
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>: Tant que <Navigate>le composant est rendu, le chemin sera modifié et la vue sera changée. Il peut être utilisé pour la redirection de routage, en définissant la page de routage par défaut pour entrer dans la page.
2. Créer une table de routage
// 路由表
// 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
Monter la route dans 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>
)
}
Routes imbriquées (sous-routes)
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>: Définir la sortie du sous-routage, c'est-à-dire où rendre le sous-routage
2. Paramètres de routage
Passez le paramètre params
Déclarer les paramètres lors de l'enregistrement des routes
{
path: '/about /:id',
element: <About/>,
},
passer les paramètres
<NavLink to={
`/about/children/${
id}>children</NavLink>
Utilisez useParms() pour recevoir des paramètres
import React from 'react'
import {
useParams} from 'react-router-dom'
export default function Children() {
const {
id}=useParams();
return (
<div>About:{
id}</div>
)
}
Passez le paramètre de recherche
registre
{
path: '/about',
element: <About/>,
},
passer les paramètres
<NavLink to={
`/about/children?id=${
id}&message=${
message}`}>children</NavLink>
Utilisez useSearchParams()pour recevoir les paramètres. La méthode retourne un tableau avec deux éléments : searchle paramètre et searchla méthode qui modifie le paramètre.
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>
)
}
Passez le paramètre d'état
registre
{
path: '/about',
element: <About/>,
},
passer les paramètres
<NavLink to="/about/children" state={
{
id:id,message:message}}>children</NavLink>
Utilisez useLocation()pour recevoir les paramètres. Cette méthode renvoie locationl'objet du composant de routage
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() contient le contenu comme indiqué ci-dessous
3. Saut de routage
première méthode
<NavLink to="/home">Home</NavLink>
Méthode 2 : useNavigate()
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()Renvoie une fonction qui peut être appelée pour implémenter la navigation par itinéraire par programmation. Les fonctions ont deux façons de passer des paramètres.
La première passe par deux paramètres : la route et les paramètres associés. Les paramètres ne peuvent être réglés replaceque et state. Vous voulez passer les paramètres paramset searchdirectement sur la bande de route.
La deuxième façon passe un nombre représentant quelques pas en avant ou en arrière.