React Router 4低阶组件路由失效问题技术求助

嘿，刚看完你的问题，你用map循环渲染Route的方式其实挺高效的，不过既然遇到了路由相关的问题，我从你给出的代码和场景出发，给你一些常见问题的排查和解决思路：

首先先把你的路由代码整理一下，方便后续分析：

<Router>
  <div>
    {indexRoutes.map((p, k) => {
      return <Route exact path={p.path} component={p.component} key={k} />;
    })}
  </div>
</Router>

常见问题及解决方案 #

• 路由匹配异常（多个页面同时渲染）
  你给每个Route都加上了exact属性，这在单页路由的场景下是合理的，但要注意：如果之后要给会员区添加子路由（比如/member/profile），exact会导致父路由/member无法匹配子路由，这时候需要给会员区的父路由去掉exact属性。

• 页面跳转时刷新整个页面
  如果你现在用原生<a>标签做导航，会导致页面全量刷新，失去React单页应用的优势。建议改用React Router提供的Link或NavLink组件：

  import { Link } from 'react-router-dom';
  
  // 在Router包裹的div内添加导航
  <nav className="nav-bar">
    <Link to="/">主页</Link>
    <Link to="/login">登录页</Link>
    <Link to="/member">会员区</Link>
  </nav>
  

  这样就能实现无刷新的页面切换了。

• 路由参数传递需求
  如果之后需要给会员区传递用户ID这类动态参数，可以修改路由的path定义：

  // 在indexRoutes里设置会员区的path为 "/member/:userId"
  // 然后在会员区组件内获取参数
  const MemberPage = (props) => {
    const userId = props.match.params.userId;
    // 后续逻辑
    return <div>会员区：{userId}</div>;
  }
  

• 添加404兜底页面
  可以在所有路由的最后添加一个没有path和exact的Route，用来处理路由不匹配的情况：

  // 放在map渲染的Route之后
  <Route component={NotFoundPage} />
  

如果你的问题是特定场景下的（比如某个页面无法渲染、跳转后组件状态丢失等），可以补充更多细节，我再帮你针对性解决～

内容的提问来源于stack exchange，提问作者Buck Ingham