在条件语句中封装react Route

Question

我正在使用react路由器。最初，我有两个不同的组件在相同的路由下渲染，一个有参数，一个没有(这就是如何区分路由)。现在我试图添加可选参数到第一条路由，而不编辑第二条路由。问题是没有办法区分第一条路线和第二条路线。

我的解决方案是将路由包装在条件语句中，条件适用于第一条路由，但我无法到达第二条，因为确定条件语句的测试仅在路由的第一次呈现上运行?所以我的问题是如何在条件语句中正确地包装反应路由?这是我的路由的样子:

{ !locationTest() ? 
<>
<Route
exact={true}
path="/encounter-monitor/:queryData?"
component={EncounterMonitor}
/>
</>
: 
<>
<Route
exact={true}
path="/encounter-monitor/:encounterID"
component={EncounterMonitorDetails}
/>
</>
}

和测试:

const locationTest = () => {
let regex = new RegExp('/?');
let regex2 = new RegExp('/encounters-');
let theURL = window.location.href;
let test = !regex.test(theURL) && regex2.test(theURL);
return test
}

我似乎不能让第二条路这样工作。

第一个组件将具有包含/或/?的路由，第二个路由将始终包含/encounters-。

Answer 1

在大多数情况下，你不希望在同一路由下呈现2个不同的组件。要将可选数据传递给组件，通常会使用搜索参数。

这意味着您不应该再为EncounterMonitor传递可选路径，而是将其移动到搜索参数中。一个示例路径是:

/encounter-monitor?query=foo+bar

这可以让你很容易地区分:

/encounter-monitor/1

要支持上述功能，你应该将你的路由更新为:

<>
<Route
exact={true}
path="/encounter-monitor"
component={EncounterMonitor}
/>
<Route
exact={true}
path="/encounter-monitor/:encounterID"
component={EncounterMonitorDetails}
/>
</>

然后更新你的EncounterMonitorDetails使用useSearchParams:

const [searchParams, setSearchParams] = useSearchParams();

处理你想要支持的(可选的)搜索参数。

if (searchParams.has("query")) {
const query = searchParams.get("query");
// do stuff...
}

当链接到一个页面时，你可以传递搜索参数作为链接的一部分:

<Link to="/encounter-monitor?query=foo+bar">
foo bar encounter monitors
</Link>

Answer 2

你处理这个问题的方式不对。React路由器通过根据url位置有条件地呈现组件，使你的应用变成单页应用。但是您需要将数据附加到url后，就好像它是php之类的语言一样。也许你的解决方案在于仅仅制作单独的组件来处理这些数据，并通过两个静态路由将数据传递给它们?或者甚至有一个路由和一个组件，但有条件地渲染其中的数据(尽管我建议将它们保持在单独的组件中，以使您的项目更干净)