React Router跨组件路由问题：导航激活状态不更新

嘿，你的思路方向是对的——把路由管理放在App.js，导航组件单独抽离成MainNav.js，这个分层是合理的，不需要把导航代码移回App里。当前的问题出在路由和导航组件的联动方式上，咱们一步步来解决：

问题根源 #

你现在的写法是给每个Route单独渲染一个MainNav，手动传递active属性。这种方式不仅冗余（每个路由都重复写MainNav），而且当路由切换时，虽然URL变了，但MainNav的激活状态完全依赖你手动传递的active值，一旦路由规则变动（比如新增类别），你得同步修改所有相关Route的active参数，很容易出错。更关键的是，这种写法让MainNav失去了自主判断当前路由的能力，完全依赖父组件传值，反而限制了灵活性。

优化方案 #

我们可以让MainNav自己感知当前路由，不需要App手动传active，同时简化App的路由结构：

1. 简化App.js的路由结构 #

把MainNav从各个Route中抽出来，放在最外层，这样不管哪个路由匹配，导航栏都会一直存在，而且只渲染一次：

import React, { Component } from 'react';
import './App.css';
import { Route, withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import MainNav from "./Components/MainNav";
import {addPost} from "./Actions/Posts";

class App extends Component {
  // connect已经注入了dispatch，不需要手动取store
  addPost = () => {
    let timestamp = Date.now();
    this.props.dispatch(addPost({
      id: 'fdafsf',
      timestamp: timestamp,
      body: 'this is the body',
      author: 'this is the title',
      category: 'category',
      title: 'this is the title'
    }))
  }

  render() {
    const { category } = this.props;
    return (
      <div className="App">
        {/* 把MainNav放在所有Route外面，作为全局导航只渲染一次 */}
        <MainNav categories={category} />
        {/* Route只负责渲染对应路由的页面内容 */}
        <Route exact path="/" render={() => (
          <div>首页内容区域</div>
        )}/>
        <Route path="/react" render={() => (
          <div>React分类内容区域</div>
        )}/>
        <Route path="/redux" render={() => (
          <div>Redux分类内容区域</div>
        )}/>
        <Route path="/udacity" render={() => (
          <div>Udacity分类内容区域</div>
        )}/>
      </div>
    );
  }
}

function mapStateToProps({posts, category}) {
  return { 
    posts,
    category 
  }
}

// connect会自动处理store，不需要手动传store给App
export default withRouter(connect(mapStateToProps)(App))

2. 修改MainNav.js，让它自主判断激活状态 #

用withRouter包裹MainNav，这样它就能获取到路由相关的location属性，然后根据当前路径自动判断哪个导航项应该激活：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link, withRouter } from 'react-router-dom'

class MainNav extends Component{
  static propTypes = {
    categories: PropTypes.array.isRequired,
    // 通过withRouter注入location属性
    location: PropTypes.object.isRequired
  }

  render() {
    const { categories, location } = this.props;
    // 根据当前路径判断激活标签
    const currentPath = location.pathname;
    const currentTab = currentPath === '/' ? 'all' : currentPath.slice(1);

    return (
      <div className={"main-nav-container"}>
        <ul className={"main-nav-list"}>
          <li className={"main-nav-list-item " + (currentTab === 'all' ? 'active':'')}>
            <Link to="/" >
              <div className={"category"}> All </div>
            </Link>
          </li>
          {categories.map( (category) => (
            <li className={"main-nav-list-item " + (currentTab === category.name ? 'active':'')} key={category.path}>
              <Link to={"/" + category.path} >
                <div className={"category"}> {category.name} </div>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    )
  }
}

// 用withRouter包裹，注入路由相关属性
export default withRouter(MainNav)

3. 额外优化：修复index.js的store传递问题 #

你的App已经通过connect连接了Redux，不需要手动给App传store prop，Provider已经把store注入到所有子组件了，所以index.js里的<App store={store}/>可以改成<App/>：

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
      <App/> {/* 移除多余的store prop */}
    </Provider>
  </BrowserRouter>,
  document.getElementById('root')
);

为什么这样改能解决问题？ #

• MainNav现在通过withRouter直接获取路由信息，路由变化时location属性会自动更新，触发MainNav重新渲染，激活状态也会同步切换。
• App的路由结构更清晰，导航栏作为全局组件只渲染一次，Route只负责对应页面内容的渲染，符合组件分层的原则。
• 后续新增类别时，只需要在Redux的category状态里添加数据，MainNav会自动生成对应的导航项，不需要修改路由配置，维护性大大提升。

内容的提问来源于stack exchange，提问作者David Jarrin