react-router-dom(v6) 的使用

本文主要是介绍react-router-dom(v6) 的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

配置 basename 方式一

1.创建一个router/index.tsx 文件

import { createBrowserRouter } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Login from "../pages/login";
const basename = process.env.REACT_APP_ROUTERBASE || "";
const router = createBrowserRouter([{path: `${basename}/`,element: <Home />,},{path: `${basename}/login`,element: <Login />,},{path: `${basename}/about`,element: <About />,},
]);export default router;

2.在app.tsx 配置

import { Provider } from "react-redux";
import store from "./store";
import { RouterProvider } from "react-router-dom";
import router from "./router";
function App() {return (<Provider store={store}><RouterProvider router={router} /></Provider>);
}
export default App;

配置 basename 方式二

1.创建一个router/index.tsx 文件

import { createBrowserRouter, Routes, Route } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Login from "../pages/login";
const routes = [{path: `/`,element: <Home />,},{path: `/login`,element: <Login />,},{path: `/about`,element: <About />,},
];export default function Router() {return (<Routes>{routes.map((route, index) => (<Route key={index} path={route.path} element={route.element} />))}</Routes>);
}

2.在app.tsx 配置

import { Provider } from "react-redux";
import store from "./store";
import { RouterProvider, BrowserRouter } from "react-router-dom";
import Router from "./router";
function App() {return (<Provider store={store}><BrowserRouter basename="/app"><Router></Router></BrowserRouter></Provider>);
}
export default App;

这篇关于react-router-dom(v6) 的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---