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 Uso de enrutamiento

Enrutamiento de un nivel y enrutamiento de varios niveles

<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 se usa para rutas anidadas, solo cuando coincide con la ruta principal, establezca el componente representado.

Para resolver el problema de que cuando una ruta anidada tiene varias subrutas pero no puede confirmar qué subruta se representa de forma predeterminada, se puede agregar el atributo de índice para especificar la ruta predeterminada.

2.4 Redirección

Utilice el componente Navegar en su lugar

<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 Enrutamiento anidado

<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 Navegación declarativa y programática

2.6.1 Navegación declarativa

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

2.6.2 Navegación programática (tenga en cuenta que HOOK usa componentes de clase y no se puede usar directamente)

// 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 Enrutamiento dinámico

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

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

¡Encontré que props es un objeto vacío! ! ! Tantas funciones no se pueden realizar a través de parámetros de enrutamiento, como:

Navegación de enrutamiento programático, puede usar el enlace useNavigate para navegar en componentes no controlados, pero no hay nada que pueda hacer en los componentes de clase, solo puede encontrar una manera de usar la etiqueta <Navigate>, que es muy problemática, puede leer esto artículo: https: //www.jianshu.com/p/5bdfd2fac2cd
Obtener parámetros de enrutamiento En la versión anterior de react-router-dom, los tres parámetros de enrutamiento ubicación, historial y coincidencia se montan directamente en los accesorios del componente, Incluso si el componente no está enrutado, los componentes también se pueden usar con componentes de alto nivel del enrutador para mejorar los componentes ordinarios o llevar estos tres parámetros a los accesorios.

En la versión v6 withRouter se elimina directamente. ¿qué hacer?
Se estima que el propósito oficial es recomendar encarecidamente que usemos React Hooks , a fin de aumentar el umbral para usar componentes de clase (tm no puede ser compatible como vue, ¿transición suave?). Solo puede escribir el componente de alto nivel con el enrutador usted mismo para lograr este requisito. Puede leer la respuesta en este artículo: 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 } />;
    }
  }

Cuando se utiliza el componente

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)

Configuración de enrutamiento de componentes 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;

estilo

En la versión V6, activeClassName y activeStyle se han eliminado de NavLinkProps , puede usar directamente una función en el className y el estilo de <NavLink> para usar active .

Uso 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 enrutamiento de configuración de enlaces 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

usos de app.js


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

  return (
   <>
    {element}
    </>

  );
}

export default App;

Tres, contenido de actualización v6 de react-router-dom

Cambiar -> Enrutadores

Componente del enrutador -> elemento

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

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

redirigir

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

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

El enrutador puede anidar directamente al enrutador,
lo que antes no era posible. Debe definir subrutas en un componente

Reglas de ruta de enrutamiento simplificadas

useHistory se convierte en Historia

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 exacto> a <NavLink final>
useMatch -> useRouteMatch

react-router-dom V6 Resumen del tutorial de documentación en chino

El último video de aprendizaje del proyecto Vue grabado personalmente: Estación B

1. Comparación con el enrutamiento V5

2. Pasos de enrutamiento

2.1 Importar archivos de biblioteca

2.2 Introducción del enrutador en la página de inicio