webpack+React+react-router+TypeScript项目路由无法生效问题求助

问题原因 #

你遇到的问题和webpack配置无关，是react-router v5的路由匹配规则导致的。
组件会按照从上到下的顺序匹配路由，只要路径前缀匹配就会命中对应的组件。你将路径为/的根路由放在了第一位，所有路径都会匹配到/这个前缀，因此不管访问什么路径都只会渲染Dashboard组件。你之前配置的historyApiFallback: true和publicPath: '/'都是正确的，不需要额外修改webpack配置。

解决方法 #

你可以任选以下任意一种方案修改路由配置：

• 给根路由添加exact属性，开启精确匹配，只有路径完全等于/时才会命中根路由：

<Switch>
  <Route exact path='/'>
    <Dashboard />
  </Route>
  <Route path='/test'>
    <SurveyList />
  </Route>
</Switch>

• 调整路由排列顺序，把更具体的路由放在更靠前的位置，匹配到/test时会优先命中对应组件，不会走到根路由：

<Switch>
  <Route path='/test'>
    <SurveyList />
  </Route>
  <Route path='/'>
    <Dashboard />
  </Route>
</Switch>

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