react配置路由

1、安装依赖

npm i react-router react-dom react-router-dom react-router-config -S

2、配置路由：routes.tsx

import Index from '../views/index';
import PLP from '../views/plp';
import PDP from '../views/pdp';
import Login from '../views/login';
import My from '../views/my/my';
import Profile from '../views/my/profile';
import Order from '../views/my/order';
import Collection from '../views/my/collection';
 
//创建路由
const routes = [{
  path: '/',
  meta: {
    title: '首页'
  },
  component: Index,
  exact: true // 严格匹配，不然所有路由都会命中/，添加严格匹配，只有/命中首页
}, {
  path: '/plp',
  component: PLP,
  meta: {
    title: '列表页'
  }
}, {
  path: '/pdp',
  component: PDP,
  meta: {
    title: '详情页'
  }
}, {
  path: '/login',
  component: Login,
  meta: {
    title: '登录'
  }
}, {
  path: '/my',
  component: My,
  auth: true,
  redirect: '/my/profile',
  meta: {
    title: '我的'
  },
  children: [{
    path: '/my/profile',
    component: Profile,
    meta: {
      title: '我的-主页'
    }
  }, {
    path: '/my/order',
    component: Order,
    meta: {
      title: '我的-订单'
    }
  }, {
    path: '/my/collection',
    component: Collection,
    meta: {
      title: '我的-收藏'
    }
  }]
}]
export default routes;

3、引入路由配置，render到页面：App.tsx

import React, { Component } from "react";
import routes from './router/routes';
import { Redirect } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import { withRouter } from 'react-router'
@withRouter // 路由监听
export default class App extends Component<any, any> {
  constructor(props: any) {
    super(props)
    this.state = {}
  }
  render () {
    // 当前路由
    const pathname = this.props.location.pathname;
    // 从路由列表匹配到当前路由配置
    const routeObj = routes.find(item => {
      return item.path === pathname
    })
    // 获取登录状态
    const loginStatus = sessionStorage.getItem('token')
    // 更新浏览器title
    if (routeObj && routeObj.meta && routeObj.meta.title) {
      document.title = routeObj.meta.title
    }
    // 未登录状态进入需要登录的路由
    if (routeObj && routeObj.auth && !loginStatus) {
      return <Redirect to="/login" />
    }
    // 需要重定向的页面，比如/my需要渲染/my/profile
    if (routeObj && routeObj.redirect) {
      return <Redirect to={routeObj.redirect} />
    }
    return (
      <div>
        {renderRoutes(routes)}
      </div>
    )
  }
}

4、子路由：my.tsx页面

import React, { Component } from "react";
import { Link } from 'react-router-dom';
import { renderRoutes } from 'react-router-config'
import { Menu } from 'antd';
import '../../style/my.less';
 
const SubMenu = Menu.SubMenu;
 
export default class My extends Component<any, any> {
  constructor(props: any) {
    super(props)
    this.state = {}
  }
  render () {
    // 当前路由
    const pathname = this.props.location.pathname;
    // 子路由列表
    const route = this.props.route;
    // 从子路由列表匹配到当前路由配置
    const routeObj = route.children.find((item: { path: string; }) => {
      return item.path === pathname
    })
    if (routeObj && routeObj.meta && routeObj.meta.title) {
      document.title = routeObj.meta.title
    }
    return (
      <div className="my-page flex">
        <Menu
          style={{ width: 240 }}
          defaultOpenKeys={['sub1']}
          selectedKeys={[this.state.current]}
          mode="inline"
        >
          <SubMenu key="sub1" title={<span><span>我的</span></span>}>
            <Menu.Item key="1">
              <Link to={{pathname: '/my/profile'}}>个人信息</Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to={{pathname: '/my/order'}}>订单</Link>
            </Menu.Item>
            <Menu.Item key="3">
              <Link to={{pathname: '/my/collection'}}>收藏</Link>
            </Menu.Item>
          </SubMenu>
        </Menu>
        <div className="my-container">{renderRoutes(route.children)}</div>
      </div>
    )
  }
}