react项目路由的统一配置

react项目路由的统一配置

1、首先定义一个routes.jsx文件夹

import React from "react";
/*
 BrowserRouter相当于路由模式中的history模式，可以让url不带#
 HashRouter相当于路由模式中的hash模式，url携带#
 所有Route组件都必须包含在Routes组件中
*/
import { Route, BrowserRouter, Routes } from "react-router-dom";
import Login from "../pages/login";
import Register from "../pages/register";
import App from "../App.jsx";
import List from "../pages/list";
import Material from "../pages/material";
import Edit from "../pages/edit";
import NoMatch from "../pages/404";

/*将所有页面统一进行配置 */
const baseRouter = () => (
	<BrowserRouter>
		<Routes>
			<Route path="/" element={<App />}>
                /*
                  1、在子路由中可以不用携带/
                  2、当将list路径设置为默认路径的时候，需要将其path属性删除，增加index属性
                <Route index element={<List />}></Route>
                */
				<Route path="/list" element={<List />}></Route>
				<Route path="/edit" element={<Edit />}></Route>
				<Route path="/material" element={<Material />}></Route>
			</Route>
			<Route path="/login" element={<Login />}></Route>
			<Route path="/login/:id" element={<Login />}></Route>
            
            //这一行路由规则代表：匹配携带参数或者不携带参数都可以
            <Route path="/login/*" element={<Login />}></Route>
			<Route path="/register" element={<Register />}></Route>
            //当没有路径进行匹配的时候，到达404页面
            <Route path="*" element={<NoMatch />}></Route>
		</Routes>
	</BrowserRouter>
);

export default baseRouter;

2、在入口文件index.js中将其引入

import React from "react";
import ReactDOM from "react-dom";
import ConfigRoutes from "./routes/index.jsx";
import "antd/dist/antd.css"; //引入css样式

ReactDOM.render(<ConfigRoutes />, document.getElementById("root"));

3、App.jsx作为二级路由出口页面需要使用Outlet进行页面渲染配置

import React from "react";
import { Outlet} from 'react-router-dom';
const App = () => {
    /*
      Outlet组件相当于vue中router-view以及v5之前的this.props.children
    */
	return (
		<div>
		  首页
			<Outlet></Outlet>
		</div>
	)
}
export default App;