React里的router6使用方法

基本使用

安装命令

npm install react-router-dom yarn add react-router-dom

引入使用

首先创建 index.config.tsx / jsx 组件 ,引入下面代码： 【注意】：必须创建 tsx 或 jsx 文件否则会报错

import * as React from "react";
import type { RouteObject } from "react-router-dom";
const Login = React.lazy(() => import("../components/login/index"));
const constantRouteMap: RouteObject[] = [
  {
    path: "/",
    element: <Login />,
  },
];

export default constantRouteMap;

在 index.config.tsx / jsx 文件下创建 index.ts / js 文件，引入一下代码：

import { useRoutes } from "react-router-dom";
import constantRouteMap from "./index.config";

const RouterView = () => useRoutes(constantRouteMap);

export default RouterView;

App.tsx 文件

import * as React from "react";
import { BrowserRouter } from "react-router-dom";
import RootRoutes from "./router/index";
import "./assets/css/base.scss";
import { Provider } from "react-redux";
import Store from "./redux/store";
const App: React.FC = () => (
  <Provider store={Store}>
    <BrowserRouter>
      <RootRoutes />
    </BrowserRouter>
  </Provider>
);

export default App;