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;