react-router 监听路由变化--解决路由回退导航栏状态也跟着回退问题

前言:

用react 来做了很多小项目 一直都没结合router来使用更别说redux ,今天就尝试了下使用react的全家桶,试着装环境下包什么的太麻烦了 ,然后就了解了 umi 这个框架, 只能说太nb了 然后就跟着文档撸了起来 . 约定大于配置这个是真的好 ,以前写后台的时候就是遵循的这个. 然后又发现 umi 又是集成了 dav+ant +react全家桶的 ,但是dav是个什么鬼,不知道啊,然后又去看了下文档 哦原来dav和umi都是阿里的大神开发的 umi就是比 dav更优雅 更多功能的框架,特别是对react-redux的封装,那是一个爽啊.然后就尝试做了个小项目.(注:之前完全没有了用过router所以就遇到了那些问题)

 

1.umi官网:https://umijs.org/zh/

搭建项目什么的就看官网就行了很好懂.

 

2.我要做项目的亚子

 

 

3.项目结构 用umi脚手架搭的 里面的文件都是自动生成的

 

里面对应的东西其实umi官网都有讲,我简单说下

layouts 写的东西就是整个网站公用的 

pages 就是你写的没个文件 只要你不在 配置文件里做router配置 都会自动帮你配置路由  里面的index.js文件 自动配置的路由是"/"

例如 你在里面建 user/index.js 就是自动帮你生成user的路由 你在浏览器 输入ip+端口+/user{http://localhost:8000/user} 就可以访问到这个页面的内容

其他的文件先不管 想了解更多的 详细看文档 一天就能搞定全部

4.问题

重点来了, 导航栏我用的是ant的组件 ,umi已经是内置的了 开箱即用,

接下来 修改layouts/index.js

import React from 'react';
import { Carousel, Menu, Icon } from 'antd';
import 'antd/dist/antd.css';
import styles from './index.css';
import Link from 'umi/link';

// ---redux使用--
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import appStore from '../reducers/index';
const store = createStore(appStore);
// ----

console.log(window.g_app._store.getState().products);
const { SubMenu } = Menu;

class BasicLayout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: '/',
    };
    this.props.history.listen(route => {
      console.log(route.pathname);
      this.setState({
        current: route.pathname,
      });
    });
  }

  handleClick = e => {
    // console.log('click ', e);
    // console.log(e.key);
    // console.log(window.location.pathname);
    this.setState({
      current: window.location.pathname,
    });
  };

  render() {
    return (
      <div className={styles.normal}>
        {/* <p>{this.state.current}</p>
        <p>{window.g_app._store.getState().products.current}</p> */}
        <Provider store={store}>
          <Carousel autoplay>
            <div>
              <h3 className={styles.aa}>1</h3>
            </div>
            <div>
              <h3>2</h3>
            </div>
            <div>
              <h3 className={styles.aa}>3</h3>
            </div>
            <div>
              <h3>4</h3>
            </div>
          </Carousel>

          <Menu
            onClick={this.handleClick}
            // selectedKeys={[window.g_app._store.getState().products.current]}
            selectedKeys={[this.state.current]}
            mode="horizontal"
          >
            <Menu.Item key="/">
              <Link to="/">
                <Icon type="home" />
                首页
              </Link>
            </Menu.Item>
            <Menu.Item key="/read">
              <Link to="/read">
                <Icon type="read" />
                课程安排
              </Link>
            </Menu.Item>
            <Menu.Item key="/feedback">
              <Link to="/feedback">
                <Icon type="bug" />
                反馈
              </Link>
            </Menu.Item>

            <Menu.Item key="/ellipsis">
              <Link to="/ellipsis">
                <Icon type="ellipsis"></Icon>
                其他
              </Link>
            </Menu.Item>
          </Menu>

          {this.props.children}
        </Provider>
      </div>
    );
  }
}

export default BasicLayout;

然后效果就出来了 然后分别在 pages 新建对应的路由

根据约定 只要往里写 就会自动帮我配置路由

然后运行项目 发现网页后退操作 导航的状态并不能也跟着回退状态. 

然后分析 一个导航在的组件是共有组件 生命周期没有变化 也不是路由要变化的组件 ,所以并不能改变,

然后我就想着 把那个状态 提取出来 放到外面 然后里面的路由组件用到react的生命周期函数 当组件销毁一次就 修改状态.把状态派发到store里 更新全局的状态 为此我硬是学会了 redux .但是尝试了一番 发现 更新的历史并不能是最新加载的 拿到的总是上一次的数据 到这里 就比较麻烦了  .

然后 想想 让里面的状态跟着 路由走不就好啦  为此我用到了window.location.pathname, 来获取路由路径 ,我让导航的状态 跟着它走就ok了 

但是问题又来了 回退的时候 怎么监听路由的变化呢

然后百度一下 发现可以监听路由的变化

this.props.history.listen(route => { // 监听
      console.log(route.pathname);
      this.setState({
        current: route.pathname,// 更新state
      });
    });

然后就可以啦

其实整片文章的重点只有一个就是 怎么监听路由的变化 ,不需要写那么长, 写这么长是记录一下 我思考的一个流程,和解决问题的的一个思路,现在肯定是还有很多问题的(比较蠢) 等过段时间再回头看看 有没有成长 哈哈..