react 路由v6

这里是区别：V5 vs V6
这里是官网：可以查看更多高级属性

基本使用：

1、配置文件

src/routes/index

import React from "react";

const Home = React.lazy(() => import("../Pages/Home"));
const About = React.lazy(() => import("../Pages/About"));

const routes = [
  {
    path: "/home",
    name: "home",
    element: <Home></Home>,
  },
  {
    path: "/about",
    name: "about",
    element: <About></About>,
  },
];

export default routes

2. 使用路由方式1

src / App.js
useRoutes可以代替标签完成：

• 注册路由，完成路由和组件的匹配
• 自动根据当前路径匹配一个组件
• 给当前路由组件指定展示位置，就是elements所处的位置

import { useRoutes } from "react-router";
import routes from "./routes";

function App() {
  const elements = useRoutes(routes);

  return (
    <div className="App">
      <h3>{导航区...} </h3>
      {elements}
    </div>
  );
}

export default App;

src / main.js
注意：

<BrowserRouter>必须存在，包裹最外层奥

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>
);

3、使用路由表的方式2