以前，我们只能在 React App 中使用一个 Routes。但是现在我们可以在 React App 中使用多个路由，这将帮助我们基于不同的路由管理多个应用程序逻辑。

import React from 'react';
import { Routes, Route } from 'react-router-dom';
function Dashboard() {
  return (
      <p>Look, more routes!</p>
      <Routes>
        <Route path="/" element={<DashboardGraphs />} />
        <Route path="invoices" element={<InvoiceList />} />
      </Routes>
    </div>
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard/*" element={<Dashboard />} />
    </Routes>
(4) 用 useNavigate 代替 useHistory
 
// v5
import { useHistory } from 'react-router-dom';
function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  return <button onClick={handleClick}>Submit</button>;
// v6
import { useNavigate } from 'react-router-dom';
function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  return <button onClick={handleClick}>Submit</button>;
history的用法也将被替换成navigate
 
// v5
history.push('/home');
history.replace('/home');
// v6
navigate('/home');
navigate('/home', {replace: true});
(5) 新钩子 useRoutes 代替 react-router-config
 
function App() {
  let element = useRoutes([
    { path: '/', element: <Home /> },
    { path: 'dashboard', element: <Dashboard /> },
    { path: 'invoices',
      element: <Invoices />,
      children: [
        { path: ':id', element: <Invoice /> },
        { path: 'sent', element: <SentInvoices /> }
    // 重定向
    { path: 'home', redirectTo: '/' },
    // 404找不到
    { path: '*', element: <NotFound /> }
  ]);
  return element;
(6) 大小减少：从20kb到8kb
 React Router v6给我们带来方便的同时，还把包减少了一半以上的体积
 
 
原文链接：https://blog.csdn.net/weixin_40906515/article/details/104957712
                    react-router-dom从V5升级到V6后，有些使用做了一些改变：(1) Switch 重命名为 Routes// v5&lt;Switch&gt;    &lt;Route exact path="/"&gt;&lt;Home /&gt;&lt;/Route&gt;    &lt;Route path="/profile"&gt;&lt;Profile /&gt;&lt;/Route&gt;&lt;/Switch&gt;// v6&lt;Routes&gt;    &lt;R.
import React from "react"
import ReactDOM from "react-dom"
import App from "./App.jsx"
import "babel-polyfill"
const root = document.getElementById("app")
if (root !== null) {
 ReactDOM.render(, document.getElementById("app"))
各个文件的详细位置：
主要目录App.jsx:
import React, { Fragme
react-routerReact Router 核心
react-router-dom用于 DOM 绑定的 React Router
react-router-native用于 React Native 的 React Router
react-router-re...
 {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
<NavLink activeClassName="huang" className="list-group-item" to="/about">About</NavLink>
<NavLink activeClassName="huang" className="list-gro.
				
当我想在 react-router-dom 导出 Switch 组件时，出现了这个一个错误：'Switch' is not exported from 'react-router-dom'，Switch  不是从 react-router-dom 导出的
原因如下：
在 react-router-dom 版本v5中是可以这样去写的，而我用的是版本 v6的， 它用 Routes 组件替换了 Switch。
两者的写法差距如下：
// 使用 Switch
import {Route, Switch} fro
				
1.不加Switch的代码
import React, { Component } from "react";
import Div1 from "./components/div1"
import Div2 from "./components/div2"
import Page1 from "./pages/page1";
import Page2 from "./pages/page2";
import { Link, BrowserRouter, Route, NavLink } from "rea
Message.jsx
import React, { Component } from "react";
import { Link, Route, Switch } from "react-router-dom";
import Detail from "./Detail";
class Message extends Component {
  state = {
    messageArr: [
      { id: "01", title: "消息1" },..
				
react中的路由介绍
现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）
	前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系
	使用 React 路由简单来说就是：配置路径和组件（配对）
React路由使用的基本