React实战 ---- 路由配置及多级导航切换路由

最新推荐文章于 2025-06-16 20:23:48 发布

那等雨停吧

最新推荐文章于 2025-06-16 20:23:48 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： React

本文链接：https://blog.csdn.net/WRian_Ban/article/details/103548862

本文介绍了在管理系统项目中如何使用React进行路由配置和实现多级导航切换。通过基础代码展示，解释了从传统路由方式转向使用React Router的好处，详细说明了如何设置HashRouter实现主路由，并在layout内页容器部分编写路由以达到精准匹配。同时，给出了一个小Demo，展示了一个使用antd美化后的多级导航路由实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

在管理系统这类项目中，比较常见的设计还是这样的。
404页面，宣传主页，登录页面，注册页面，找回密码页面单独处理。
而系统内部就需要统一管理了，不仅仅要管理用户信息
token的有效性，为了良好的用户体验，我们还有需要使用二级路由。

在这里插入图片描述

基础代码

老规矩，先上源码Liz606/webpack-es6-react
讲解在这里：手把手带你搭建与配置Webpack + ES6 + React开发环境

这时我们就需要使用React的路由工具。从React Router简介我们可以很清楚的看到使用React Router可以为我们提供多么大的便利。

传统路由

按照传统的方法，我们需要取获取window.location.hash，在使用`switch-case来分发路由。这样是可以做的，只是不便于管理。
类似：

import React from 'react';
import ReactDOM from 'react-dom';

import IndexPage from './container/index';
import MainPage from './container/main/index';
import LoginPage from './container/login';
let Child;

class Welcome extends React.Component {
   
   
  state = {
   
   
    route: window.location.hash.substr(1)
  }
  componentDidMount() {
   
   
    window.addEventListener('hashchange', () => {
   
   
      this.setState({
   
   
        route: window.location.hash.substr(1)
      })
    })
  }

  render() {
   
   
    console.log(this.state.route);
    switch (this.state.route) {
   
   
      case '/main': Child = MainPage; break;
      case '/login': Child = LoginPage; break

最低0.47元/天解锁文章

200万优质内容无限畅学