react18+router6

react路由配置

1.安装路由 npm i react-router-dom
2.在main.jsx中引入

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from "react-router-dom";  //引入react-router-dom
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>  //修改之前的为BrowserRouter
    <App />
  </BrowserRouter>,
)

3.创建react-router文件夹并配置

import React,{ lazy } from "react"
// Navigate重定向组件
import {Navigate} from "react-router-dom"
import Home from "../pages/home/home";
import Homepage from "../pages/homepage/homepage";
import My from "../pages/my/my";
const routes = [
    //  嵌套路由 开始-------------------
    {
      path:"/",
      element:<Navigate to="/homepage"/>
    },
    // 嵌套路由 结束-------------------
    {
      path:"/Homepage",
      element: <Homepage />
    },
    {
        path:"/Home",
        element: <Home />
      },
    {
        path:"/My",
        element: <My />
      },
    // 访问其余路径的时候直接跳到首页
    {
      path:"*",
      element:<Navigate to="/homepage"/>
    }
  ]
  export default routes

4.创建相关文件并在app.jsx中引入

import router from "./router";
import { useRoutes } from "react-router-dom";
const App = () => {
  const outlet = useRoutes(router);
  return <div className="App">{outlet}</div>;
};
export default App;

5.npm run dev 运行项目