React Router v5中内容区切换路由无法更新主内容的问题

我用React Router v5搭建了带侧边栏和内容区的项目，点击侧边栏列表项时主内容能正常切换，但点击内容区内的链接（比如Bubblegum页面里的Pax链接）时，主内容无法切换到对应页面。

问题原因 #

问题出在Switch组件的匹配逻辑上——React Router v5的Switch会从上到下匹配路由，一旦找到第一个匹配的路径就停止渲染。当前routes数组中，/bubblegum路由在/bubblegum/pax之前，当访问/bubblegum/pax时，会先匹配到/bubblegum（因为该路由没有设置exact，路径前缀匹配就会生效），所以始终渲染Bubblegum的主内容组件，而跳过了Pax的路由。

解决方案 #

调整routes数组的顺序，把更具体的子路由放在父路由前面，让Switch优先匹配到精确的子路由。修改后的routes数组如下：

const routes = [
  {
    path: "/",
    exact: true,
    sidebar: () => <div>home!</div>,
    main: () => <h2>Home</h2>
  },
  {
    path: "/bubblegum/pax",
    sidebar: null,
    main: () => {
      return (
        <>
          <h2>Pax</h2>
        </>
      );
    }
  },
  {
    path: "/bubblegum",
    sidebar: () => <div>bubblegum!</div>,
    main: () => {
      return (
        <>
          <h2>Bubblegum</h2>
          <Link to="/bubblegum/pax">Pax</Link>
        </>
      );
    }
  },
  {
    path: "/shoelaces",
    sidebar: () => <div>shoelaces!</div>,
    main: () => <h2>Shoelaces</h2>
  }
];

原理说明 #

把/bubblegum/pax移到/bubblegum前面后，当访问/bubblegum/pax时，Switch会先匹配到这个精确的子路由，渲染对应的Pax主内容；而访问/bubblegum时，才会匹配到父路由，渲染Bubblegum的内容。同时侧边栏的Switch会因为/bubblegum/pax的sidebar为null，不会渲染该路由的侧边内容，符合需求。

内容的提问来源于stack exchange，提问作者github.arief