笔记十八、路由中重定向和路由表的使用

重定向

<Route path="/" element={<Navigate to="about" />} />

路由表的使用

引入

const element = useRoutes(routes);

路由表 routes/index.jsx

import { Navigate } from "react-router-dom";
import About from "../components/About";
import Home from "../components/Home";

export default [
  {
    path: "/home",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/",
    element: <Navigate to="about" />,
  },
];

App.jsx -> 函数式组件

import React from "react";
import {Link, useRoutes} from "react-router-dom";
import routes from "./routes/index.jsx";
import "./app.css"

const App = () => {
    // 引入路由表
    const element = useRoutes(routes);
    return (
        <div className="all">
            <div>
                <div className="link">
                    <Link to="/home">打开首页的页面</Link>
                </div>
                <div className="link">
                    <Link to="/about">打开关于的页面</Link>
                </div>
            </div>
            <div className="view">
                {element}
            </div>
        </div>
    );
}

export default App;