React里的router6使用方法

世间万物皆对象

发布于 2024-03-20 20:11:16

760

发布于 2024-03-20 20:11:16

文章被收录于专栏：startstart

基本使用

安装命令

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;

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除

default