React里的router6使用方法

简介: 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;


相关文章
|
10月前
|
前端开发 容器
react map使用方法详解
react map使用方法详解
426 0
|
10月前
|
前端开发
react axios 的使用方法
react axios 的使用方法
|
10月前
|
JavaScript 前端开发
Taro+React Redux最简单最简单的使用方法
React Redux最简单最简单的使用方法
|
缓存 容器
React-keeper的使用方法(坑多)
React-keeper的使用方法(坑多)
|
JavaScript 前端开发
react中ref使用方法解析
组件不是真实的DOM节点,在react开发中,官方也不建议直接去操作原生的DOM。组件的DOM节点是存在于内存中的一种数据结构,叫做虚拟DOM。如果需要从组件中获取真实的DOM节点,那就需要官方提供ref的属性。==React提供了ref用于访问在render方法中创建的DOM元素或者是React的组件实例
163 0
react中ref使用方法解析
|
前端开发
好客租房4-react的基本使用 方法说明
好客租房4-react的基本使用 方法说明
84 0
|
前端开发 API
Ant Design组件库在React中的使用方法和问题总结
ant design组件库在React中的使用方法和问题总结
Ant Design组件库在React中的使用方法和问题总结
|
JavaScript 前端开发
react-app-reqired 使用方法
导语:项目技术框架react+antd-mobile,先期按照官网配置antd-mobile按需加载,使用的是react-app-reqired,由于版本升级,最新版的react-app-reqired不能更细致的去自定义webpack配置。
5214 0
|
4月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
124 0
|
4月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
43 0