react学习笔记 (二) 重定义router路由的两种方式,react-router-dom

接上文react创建的三种方式, 重定义router 路由的两种方式

react版本 react@17.0.2 | MIT | deps: 2 | versions: 739 // npm info react
node版本 v16.4.2 // node -v
yarn版本 1.22.11 // yarn -version
dva版本 dva-cli version 0.10.1 // dva -v
nmi版本 ^2.9.0 // umi -v
react创建的三种方式: https://blog.csdn.net/lxw_hk2_zy/article/details/122297669
重定义router 路由的两种方式: https://blog.csdn.net/lxw_hk2_zy/article/details/122301216
umi.js redux 异步(effects)请求接口 https://blog.csdn.net/lxw_hk2_zy/article/details/122302297

准备工作

子组件模板

// 模板一
import React from 'react'
export default class Topic1 extends React.Component {
    render() {
        return (
            <>
                <div>
                    Topic1页面
                </div>
            </>
        )
    }
}
// 模板二
import React from 'react'
export default class Topic2 extends React.Component {
    render() {
        return (
            <>
                <div>
                    Topic2页面
                </div>
            </>
        )
    }
}
// 模板三
import React from 'react'
export default class Topic3 extends React.Component {
    render() {
        return (
            <>
                <div>
                    Topic3页面
                </div>
            </>
        )
    }
}

目录结构

组件之间嵌套

// 第一步, 头部引入 react-router-dom
import { HashRouter as Router, Route, Link, Switch, useRouteMatch, useParams } from 'react-router-dom'
// 第二步, 引入子组件
import Test1 from './routerOne/index'
import Test2 from './routerTwo/index'
import Test3 from './routerThere/index'
// 第四步, 引入路由超链
<Link to={`/testone`}>测试router1</Link>
<Link to={`/testtwo`}>测试router2</Link>
<Link to={`/testthere`}>测试router3</Link>
// 第四步, 设置子路由盒子
<Switch>
    <Route exact path={'/testone'} component={Test1}/>
    <Route exact path={'/testtwo'} component={Test2}/>
    <Route exact path={'/testthere'} component={Test3}/>
</Switch>

完整代码

import React from 'react';
import styles from './index.css';
import { HashRouter as Router, Route, Link, Switch, useRouteMatch, useParams } from 'react-router-dom'
import { Menu, Button } from 'antd';
import Test1 from './routerOne/index'
import Test2 from './routerTwo/index'
import Test3 from './routerThere/index'


const { SubMenu } = Menu;
export default function() {
  return (
    <div className={styles.normal}>
      <div className={styles.menuListBox}>
        <Menu
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
        >
          <Menu.Item key="1">
            <Link to={`/testone`}>测试router1</Link>
          </Menu.Item>
          <Menu.Item key="2">
            <Link to={`/testtwo`}>测试router2</Link>
          </Menu.Item>
          <Menu.Item key="3">
            <Link to={`/testthere`}>测试router3</Link>
          </Menu.Item>
        </Menu>
      </div>
      <div className={styles.contentBox}>
        <Switch>
            {/* <Route exact path={'/testone'} component={() => <h3>嵌套路由1</h3>}/>
            <Route exact path={'/testtwo'} component={() => <h3>嵌套路由2</h3>}/>
            <Route exact path={'/testthere'} component={() => <h3>嵌套路由3</h3>}/> */}

            <Route exact path={'/testone'} component={Test1}/>
            <Route exact path={'/testtwo'} component={Test2}/>
            <Route exact path={'/testthere'} component={Test3}/>
        </Switch>
      </div>
    </div>
  );
}

页面之间跳转

1, 需要更改router文件

注意: 根据版本不同, 这里两个地方都要改动

一般直接改动router文件即可, 相信在座没有不会修改的, 子路由用  routes:[{path: '', exact: true, component: require('*********').default}]

跳转

// 1, a 标签超链接
<a href='#/detail'>去detail</a>
// 2, 函数中跳转(点击事件)
this.props.history.replace('/detail');
// 3, 函数, 返回上一页
this.props.history.goBack();