子路径下的反应路由器参数答案

【问题标题】：React Router Parameter Under Subpath子路径下的反应路由器参数
【发布时间】：2019-09-12 17:03:31
【问题描述】：

我有一个我正在使用的 React 应用程序，并与我在本地构建的星球大战 API 一起使用。

前两条路线工作得很好，但我不明白为什么第三条路线不起作用。

我的猜测是，进入第三条路线第二个组件认为工作“编辑”是参数。

问题是，我怎样才能使第三条路线按我的意愿工作，或者我必须采取另一种方法。

我希望编辑剧集页面与我在“星球大战”路径中使用的组件位于同一组中。

    <Route path="/starwars" exact component={Movies} />
    <Route path="/starwars/:id" component={Episode} />
    <Route path="/starwars/edit/:id" component={EditEpisode} />

【问题讨论】：

尝试在 2nd Route 添加确切属性：

标签： reactjs react-router jsx

【解决方案1】：

尝试将确切属性添加到第二条路线。它应该可以解决问题。

<Route path="/starwars" exact component={Movies} />
<Route path="/starwars/:id" exact component={Episode} />
<Route path="/starwars/edit/:id" component={EditEpisode} />

如果没有确切的属性，对 /starwars/{whatever-after-this} 的所有传入请求都会匹配第二条路由并停在那里。

【讨论】：

这对我很有用。感谢您发布解决方案。

【解决方案2】：

能否请您更改Route 的顺序并将exact 关键字设置为/starwars/edit/:id 路径。

<Route path="/starwars" exact component={Movies} />
<Route exact path="/starwars/edit/:id" component={EditEpisode} />
<Route path="/starwars/:id" component={Episode} />

希望这对你有用！

【讨论】：

【解决方案3】：

您能否检查 webpack.config 文件中 output 属性上的publicPath。这应该指向您应用的根目录。

我去过那里，这对我有用。

output: {
    path: path.resolve('dist'),
    publicPath: '/'
}

【讨论】：