reactjs - 如果 URL 在 React 中有特定的查询参数，如何渲染组件？

Question

我有一些目前看起来像这样的路径：

const baseUrl = `${mainUrl}/web`;

<Route exact path={baseUrl} component={Goods} />
<Route exact path={`${baseUrl}/:ID`} component={Good} />
<Route exact path={`${baseUrl}/:ID/details`} component={GoodDetails} />

现在，这一切都很好，但我想做的是我想要呈现Good组件，前提是 URL 与${this.baseUrl}/:ID我们拥有的这个条件匹配，或者如果有一个名为br=. 我试图做这样的事情：

<Route exact path={`${baseUrl}/:ID` | `${mainUrl}?br=:brInfo`} component={Good} />

但是，这似乎不起作用。任何想法使用 React Router 的正确方法是什么？

标签： reactjsreact-router

Answer 1

你可以定义两个不同的路由来渲染同一个组件。

<Route exact path={`${baseUrl}/:ID`} component={Good} />
<Route exact path={`${mainUrl}?br=:brInfo`} component={Good} />