import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter,HashRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
    <App />
    </BrowserRouter>
    
);

2.3 Utilisation du routage

Routage à un niveau et routage à plusieurs niveaux

<Routes>
  {/*<Route path="/" element={<Film/>}/>*/}
  <Route index element={<Film/>}/> 
  <Route path="/film" element={<Film/>}/>
  <Route path="/cinema" element={<Cinema/>}/>
  <Route path="/center" element={<Center/>}/>
</Routes>

index est utilisé pour les itinéraires imbriqués, uniquement lors de la correspondance de l'itinéraire parent, définissez le composant rendu.

Pour résoudre le problème selon lequel lorsqu'une route imbriquée a plusieurs sous-routes mais ne peut pas confirmer quelle sous-route est rendue par défaut, l'attribut index peut être ajouté pour spécifier la route par défaut.

2.4 Redirection

Utilisez plutôt le composant Naviguer

<Routes>
  <Route path="/film" element={<Film />} />
  <Route path="/cinema" element={<Cinema />} />
  <Route path="/center" element={<Center />} />
  <Route path="*" element={<Navigate to="/film" />} />
</Routes>

2.5 Routage imbriqué

<Route path="/film" element={<Film/>}>
  {/* <Route index  element={<Nowplaying/>}/> */}
  <Route path="" element={<Redirect to="/film/nowplaying"/>}/>
  <Route path="nowplaying" element={<Nowplaying/>}/>
  <Route path="comingsoon" element={<Comingsoon/>}/>
</Route>

// Film组件 <Outlet /> 相当于 <router-view />

2.6 Navigation déclarative et programmatique

2.6.1 Navigation déclarative

<NavLink to='/'>首页</NavLink> |
<NavLink to='/news'>新闻</NavLink> | 
<NavLink to='/about'>我的</NavLink> | 
<NavLink to='/detail/123'>详情界面</NavLink>

2.6.2 Navigation par programme (notez que HOOK utilise des composants de classe et ne peut pas être utilisé directement)

// url传参
const navigate = useNavigate()
navigate(`/detail?id=${id}`)

// 获取url参数
import { useSearchParams } from 'react-router-dom'

const [searchParams, setSearchParams] = useSearchParams()
// 获取参数
searchParams.get('id')
// 判断参数是否存在
searchParams.has('id')
// 同时页面内也可以用set方法来改变路由
setSearchParams({"id":2})

2.7 Routage dynamique

// 跳转页面,路由传参
navigate(`/detail/${id}`)

// 配置动态路由
<Route path="/detail/:id" element={<Detail />}/>
    
// 获取动态路由参数
import { useParams } from 'react-router-dom'  
const { id } = useParams()

J'ai trouvé que les accessoires sont un objet vide ! ! ! Un tel nombre de fonctions ne peut pas du tout être réalisé via des paramètres de routage, tels que :

Navigation de routage programmatique, vous pouvez utiliser le crochet useNavigate pour la navigation dans les composants non contrôlés, mais vous ne pouvez rien faire dans les composants de classe, vous ne pouvez trouver qu'un moyen d'utiliser la balise <Navigate>, qui est très gênante, vous pouvez lire ceci article : https: //www.jianshu.com/p/5bdfd2fac2cd
Obtenir les paramètres de routage. Dans la version précédente de react-router-dom, les trois paramètres de routage location, history et match sont directement montés sur les accessoires du composant, même si le composant n'est pas Routage, les composants peuvent également utiliser des composants de haut niveau withRouter pour améliorer les composants ordinaires, ou apporter ces trois paramètres aux accessoires.

Dans la version v6, withRouter est directement supprimé. ce qu'il faut faire?
On estime que le but officiel est de recommander fortement l'utilisation de React Hooks , afin d'augmenter le seuil d'utilisation des composants de classe (tm ne peut pas être compatible comme vue, transition en douceur ?). Vous ne pouvez écrire vous-même le composant de haut niveau withRouter que pour répondre à cette exigence. Vous pouvez lire la réponse dans cet article : https://cloud.tencent.com/developer/ask/sof/296970

// 获取动态路由参数
import { useNavigate,useLocation,useParams } from 'react-router-dom'  

export function withRouter( Child ) {
    return ( props ) => {
      const location = useLocation();
      const navigate = useNavigate();
      const params = useParams()
    //   const match= useMatch()
      return <Child params={params}  navigate={ navigate } location={ location } />;
    }
  }

Lorsque le composant est utilisé

import React, { Component } from 'react'
// 获取动态路由参数
import {withRouter} from './withRouter'
 class Detail extends Component {
   constructor(){
    super()
   }
  render() {
    console.log(this);
    return (
      <div>Detail
        <p>参数：{this.props.params.id}</p>
      </div>
    )
  }
}
export default withRouter(Detail)

Configuration du routage du composant App.js

import Home from './views/Home'
import News from './views/News'
import About from './views/About'
import One from './views/Today'
import Two from './views/Yestoday'
import Detail from './views/Detail'
import './app.css'
//配置路由
import { Route, Link, Routes, BrowserRouter,NavLink,Navigate ,Outlet} from 'react-router-dom'
function App() {
  return (
    <>
        <div>
          <NavLink to='/'>首页</NavLink> |
          <NavLink to='/news'>新闻</NavLink> | 
          <NavLink to='/about'>我的</NavLink> | 
          <NavLink to='/detail/123'>详情界面</NavLink>
          <Outlet/>
        </div>

        <Routes>
          {/* <Route path="/" element={<Home />}></Route> */}
          <Route index element={<Home />}></Route>
          <Route path="home" element={<Home />}></Route>
           {/* // 配置动态路由 */}
           <Route path="detail/:id" element={<Detail />}/>
           {/* 路由嵌套 */}
          <Route path="news" element={<News />}>
             {/* 二级路由 */}
             {/* 
             index用于嵌套路由，仅匹配父路径时，设置渲染的组件。
              解决当嵌套路由有多个子路由但本身无法确认默认渲染哪个子路由的时候，可以增加index属性来指定默认路由。
              index路由和其他路由不同的地方是它没有path属性，他和父路由共享同一个路径。
              */}
            <Route index element={<One/>}></Route>
            <Route path='one' element={<One/>}></Route>
            <Route path='two' element={<Two />}></Route>
          </Route>
          <Route path="about" element={<About />}></Route>
          {/* //当输入  /* 任意信息，重定向到首页 */}
          <Route path='*' element={<Navigate replace to="/home" />} />
        </Routes>
    </>
  );
}

export default App;

style

Dans la version V6, activeClassName et activeStyle ont été supprimés de NavLinkProps , vous pouvez directement utiliser une fonction dans le className et le style de <NavLink> pour utiliser active .

Utilisation de className :

V5：

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

let activeClassName = "underline"
<NavLink
	to="/faq"
	className={({ isActive }) =>
	  isActive ? activeClassName : undefined
	}
>
  FAQs
</NavLink>

2.8 Routage de la configuration du crochet useRoutes

import React from "react";
import Layout from '../views/Layout'
import Home from '../views/Home'
import News from '../views/News'
import About from '../views/About'
import One from '../views/Today'
import Two from '../views/Yestoday'
import Detail from '../views/Detail'

const routes=[
    {
        path:'/',
        element:<Layout/>,
        children:[
            {
                path:'/',
                element:<Home/>,
            },
            {
                path:'/detail/:id',
                element:<Detail/>,
            },
            {
                path:'/about',
                element:<About/>,
            },
            {
                path:'/news',
                element:<News/>,
                children:[
                    { index: true, element: <One /> },
                    {  path: "one", element: <One /> },
                    { path: "two", element: <Two /> }
                ]
            }
        ]

    }
]

export default routes

app.js utilise


import { useRoutes } from "react-router-dom";
import routes from './router/routes'
function App() {
  const element = useRoutes(routes);

  return (
   <>
    {element}
    </>

  );
}

export default App;

Trois, contenu v6 de la mise à niveau de react-router-dom

Commutateur -> Routeurs

Composant routeur -> élément

<Route path='/admin/dashboard' component={Dashboard} />

<Route path=":id" element={<UserProfile />} />

réorienter

//v5
<Redirect to="about" />
<Redirect to="home" push />

// v6
<Navigate to="about" replace />
<Navigate to="home" />

Le routeur peut imbriquer directement le routeur,
ce qui n'était pas possible auparavant. Vous devez définir des sous-routes dans un composant

Règles de chemin de routage simplifiées

useHistory devient History

v5

let history = useHistory();
function handleClick() {
  history.push("/home");
}


v6

let navigate = useNavigate();
function handleClick() {
  navigate("/home");
}

//v5
const { go, goBack, goForward } = useHistory();
//v6
const navigate = useNavigate();
<button onClick={() => navigate(1)}>
<button onClick={() => navigate(2)}>
<button onClick={() => navigate(-1)}>
<button onClick={() => navigate(-2)}>

重命名 <NavLink exact> à <NavLink end>
useMatch -> useRouteMatch

réact-router-dom V6 résumé du didacticiel de la documentation chinoise

La dernière vidéo d'apprentissage du projet Vue enregistrée personnellement : Station B

1. Comparaison avec le routage V5

2. Étapes de routage

2.1 Importer des fichiers de bibliothèque

2.2 Présentation du routeur sur la page d'accueil