react-router-dom 不适用于某些路由

Question

对于这个问题，我很抱歉，也许这已经发送到某个地方，但我没有找到任何东西。

我有一个带有 webpack.config.js 的 react 项目。

我正在使用 react-router-dom 库来做项目中的路由，但是我遇到了一点问题。

ReactDOM.render(
        <Router history={history}>
            <Switch>
                <Route exact path={"/"} component={IndexComponent} />
                <Route path={"/:username"} component={HomeUser} />
                <Route path={"/:username/manager"} component={UserManager} />
            </Switch>
        </Router>
    , document.getElementById("react-root")
);

所以你可以看到我有 3 条路线：第一个是主要的“/”，它可以工作。 第二个是“/：用户名”，当我写类似http://localhost:8080/blablabla 的东西时，渲染方法有效。 现在是第三个。当我写http://localhost:8080/blablabla/manager 时，渲染方法不起作用，我看到一个白页。

我不明白错误在哪里。 webpack中有什么东西？或者它可能需要服务器配置？

在 webpack 中，我有关于 devserver 的信息：

devServer: {
  historyApiFallback: true,
},

关于我使用 HtmlWebPackPlugin 的插件，以及我使用 babel-loader、html-loader、style-loader、css-loader 和 file-loader 的模块和规则。

谢谢。

Answer 1

你的

<Route path={"/:username/manager"} component={UserManager} />

需要在上面

<Route path={"/:username"} component={HomeUser} />

像这样：

<Switch>
     <Route exact path={"/"} component={IndexComponent} />
     <Route exact path={"/:username/manager"} component={UserManager} />
     <Route path={"/:username"} component={HomeUser} />
</Switch>

而且我相信您也需要将exact 放在第二个上

如果有帮助请告诉我，干杯

Answer 2

Switch 只返回第一个匹配的Route 或Redirect。

呈现与匹配的第一个子 <Route> 或 <Redirect> 位置。

问题

问题在于您指定了不太具体的路线之前更具体的路线。路由由“前缀”匹配，意味着“/”将匹配所有个路由（因此通常需要指定exact prop），“/:username”将也匹配任何子路由。 Router 组件通常使用 exact 属性，因为它可以匹配并渲染多个匹配，而 Switch 只会匹配并渲染单个匹配。

解决方案

按特定性对路径进行排序，从更具体到更一般。这将允许首先匹配更具体的路径，然后如果未找到匹配项，则回退到不太具体的路径。

<Router history={history}>
  <Switch>
    <Route path={"/:username/manager"} component={UserManager} />
    <Route path={"/:username"} component={HomeUser} />
    <Route path={"/"} component={IndexComponent} />
  </Switch>
</Router>

通常，您还可以包含最后一个 404 组件，以防 nothing 与您的应用处理的任何路由匹配。

<Router history={history}>
  <Switch>
    <Route path={"/:username/manager"} component={UserManager} />
    <Route path={"/:username"} component={HomeUser} />
    <Route path={"/"} component={IndexComponent} />
    <Route component={FourOhFour} />
  </Switch>
</Router>