react中配置路由

赵敬训 發表於 2022-2-28 18:45:00

<h2>一个路由就是一个通道，页面之间的跳转其实就是路由的切换，所以每个应用的路由配置是必须的，浅谈react中怎么配置路由</h2>
首先你要在src文件夹下新建一个router的文件下，在router文件下新建一个index.js(我用的是TS,所以是index.tsx)
<img src="https://img2022.cnblogs.com/blog/2541384/202202/2541384-20220228183702385-1366526564.png">
然后在index.jsx里这样去配置
<div class="cnblogs_code">
<pre> 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 {
 6 exact?: boolean
 7 path: string
 8 title: string
 9 icon?: ReactNode
10 component?: ReactNode
11 children?: IRoute[]
12 }
13
14 export const routes: IRoute[] = [
15 {
16 path: "/test",
17 title: "测试一",
18 component: <Test />
19 },
20 {
21 path: "/detail",
22 title: "详情",
23 component: <Detail />
24 }
25 ]</pre>
</div>
然后再在scr文件下新建一个components文件下，在此文件夹下新建一个View.jsx的文件，里面这样配置
<div class="cnblogs_code">
<pre> 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 {
 5 render() {
 6 return (
 7 <>
 8 <Suspense fallback={<>loading ...</>}>
 9 <Router>
10 {routes.map(r => (<Switch key={r.path}>
11 <Route path={r.path}>
12 {r.component}
13 </Route>
14 </Switch>))}
15 </Router>
16 </Suspense>
17
18 </>
19 )
20 }
21 }</pre>
</div>
然后你就可以试着改变url地址栏来改变页面了，注意;hash模式下，你的url前必须加#/
用history来跳转页面时必须做好配置，部分代码如下：
 
<div class="cnblogs_code">
<pre>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)</pre>
</div>
 
这样才可以使用this.props.history.push等等api
 

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：冰中焱，转载请注明原文链接：https://www.cnblogs.com/Blod/p/15946973.html 
来源：https://www.cnblogs.com/Blod/p/15946973.html

頁: [1]

琼殿技术论坛's Archiver

react中配置路由