react-router v6
Recientemente, el proyecto de la compañía usó esto, pero hay muy pocos recursos en línea, algunos de los cuales solo se pueden ver con dinero, así que lo escribí para que todos lo compartan, porque también es nuevo para aprender, bienvenido a comentar sobre lo que es. equivocado.
1 useNavigate
2 El componente de ruta se convierte en el elemento
3 Nueva ruta useRoutes
4 Navigate reemplaza a Redirect
5 El interruptor se convierte en Rutas
. . . .
useNavigate
La sexta versión de useHistory será reemplazada por useNavigate, y no puede obtener algunas direcciones URL de Navigate. Puede imprimirlo para ver si
tiene una impresión. El historial anterior impreso es un objeto, pero no se preocupe, puede usar otra API useLocation para obtener
Rutas
Es el Switch anterior, acaba de cambiar su nombre.
Ruta
El mayor cambio en esto es convertir el componente y renderizar en elemento.
Este es el uso de v5.
Mire V6 y
escriba un componente directamente, de modo que podamos pasar datos directamente al componente a través de la asignación en lugar de tener que pasar a los niños como v5 Escribe la función y pásala.
useRoutes
Esto permite a React escribir rutas tan convenientes como vue-router.
Veamos el uso:
presta atención. El elemento aquí no necesita estar entre llaves, y
la ruta aquí no necesita ser agregada. Incluso si está anidada, no es necesario escribir la ruta principal, que es mucho mejor que la que usé antes. Solía encapsular una función y escribí sobre ella en el artículo anterior.
Los componentes aquí usan la carga diferida. Si los 
usa, puede envolver directamente las rutas en un div. 
Entonces solo es necesario introducir algo nuevo donde haya múltiples capas de enrutamiento, es decir, OUTLET, 
trátelo como props.children. Entonces no es necesario hacer otro diseño, lo cual es muy conveniente. Más conveniente que el método anterior
https://blog.csdn.net/lin_fightin/article/details/113605309 (blog anterior)
Haz una comparación con el método anterior.
Escriba un objeto de matriz usted mismo y luego encapsule una función,
import React from "react";
import {
Switch, Route, Redirect } from "react-router-dom";
const RenderRoutes = (props) => {
const {
routes, redirect } = props;
return (
<Switch>
{
redirect && (
<Route
exact
path={
redirect.to}
component={
() => {
return <Redirect to={
redirect.jump} />;
}}
/>
)}
{
routes &&
routes.map((route) => {
return (
<Route
path={
route.path}
key={
route.key}
exact={
!!route.exact}
children={
(props) => {
return <route.component route={
route} {
...props} />;
}}
/>
);
})}
</Switch>
);
};
使用的时候
`import React from 'react'
import {
BrowserRouter} from 'react-router-dom'
import RenderRoutes from './routerRender'
import routes from './routes'
function BaseRouter(){
return <BrowserRouter>
<React.Suspense fallback={
<div>loading....</div>}>
<RenderRoutes redirect={
{
to:'/',jump:'/discover'}} routes={
routes}></RenderRoutes>
</React.Suspense>
</BrowserRouter>
}
export default BaseRouter`
export default RenderRoutes;
Aunque este procesamiento puede lograr el efecto anterior, es más problemático, especialmente en el componente principal del anidamiento de enrutamiento,
como se muestra en la figura.
También necesita importar las funciones que encapsula y hacer otra capa de procesamiento, y no necesita usar la nueva API useRoutes.
Navegador
Redirección, Redirect parece haber sido eliminado, ahora lo uso para redireccionar, que es un poco diferente del uso de Redirect.
Uso anterior: 
Ahora: generalmente cooperamos con useRoutes, como se muestra en la figura.
Cuando ingresamos localhost: 3000, si no agregue parámetros más tarde, se omitirá para descubrir / recomendar, y
tenga en cuenta que no puede escribir Navegar a 
esto, y se informará un error.