react中配置路由 react中配置路由

一个路由就是一个通道，页面之间的跳转其实就是路由的切换，所以每个应用的路由配置是必须的，浅谈react中怎么配置路由首先你要在src文件夹下新建一个router的文件下，在router文件下新建一个index.js(我用的是TS,所以是index.tsx)

文章图片

然后在index.jsx里这样去配置

1 import React, { ReactNode, lazy } from "react"; 2 const Test = lazy(() => import("../pages/Test")) 3 const Detail = lazy(() => import("../pages/Detail")) 4 //Test 和 Detail分别对应你的组件 5 export interface IRoute { 6exact?: boolean 7path: string 8title: string 9icon?: ReactNode 10component?: ReactNode 11children?: IRoute[] 12 } 13 14 export const routes: IRoute[] = [ 15{ 16path: "/test", 17title: "测试一", 18component: 19}, 20{ 21path: "/detail", 22title: "详情", 23component: 24} 25 ]

然后再在scr文件下新建一个components文件下，在此文件夹下新建一个View.jsx的文件，里面这样配置

1 import React, { Component, Suspense } from 'react' 2 import { HashRouter as Router, Switch, Route } from 'react-router-dom' 3 import { routes } from '../router' 4 export default class View extends Component { 5render() { 6return ( 7<> 8loading ...}> 9 10{routes.map(r => ( 11 12{r.component} 13 14))} 15 16 17 18 19) 20} 21 }

然后你就可以试着改变url地址栏来改变页面了，注意; hash模式下，你的url前必须加#/
用history来跳转页面时必须做好配置，部分代码如下：

1 import { Link, withRouter, RouteComponentProps } from 'react-router-dom'; 2 3 4 class Test extends Component{ 5 6 7 } 8 9 export default withRouter(Test)

【react中配置路由】
这样才可以使用this.props.history.push等等api