时间戳

首页 > 解决方案 > react-router-dom 不适用于某些路由

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

问题描述

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

我有一个带有webpack.config.js.

我正在使用 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 的模块和规则。

谢谢你。

标签： reactjsreact-router-dom

解决方案

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

渲染第一个孩子<Route>或<Redirect>与该位置匹配的孩子。

问题

问题是您在更具体的路线之前指定了不太具体的路线。路由通过“前缀”匹配，意味着“/”将匹配所有路由（因此通常需要指定exactprop），“/:username”也将匹配任何子路由。该Router组件通常使用exactprop，因为它可以匹配和呈现多个匹配项，而Switch只会匹配和呈现单个匹配项。

解决方案

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

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

通常，您还可以包含最后一个 404 组件，以防实际上没有任何内容与您的应用处理的任何路由匹配。

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

推荐阅读