为什么当我写“/”路径时反应路由器不起作用？答案

【问题标题】：Why React router when i write " / " to path its doesnt work?为什么当我写“/”路径时反应路由器不起作用？
【发布时间】：2021-09-10 08:23:54
【问题描述】：

在我的路由器中，如果我在路径中添加“/”，则它不是路由。例如：

export const AppViews = () => {
  return (
    <Suspense fallback={<Loading cover="content" />}>
      <Switch>
        <Route
          path={`${APP_PREFIX_PATH}/commons`}
          component={lazy(() => import(`./commons`))}
        />

        <Redirect
          from={`${APP_PREFIX_PATH}`}
          to={`${APP_PREFIX_PATH}/commons`}
        />
      </Switch>
    </Suspense>
  );
};

它不是路由。 ("我的应用前缀路径是"/v1")

export const AppViews = () => {
  return (
    <Suspense fallback={<Loading cover="content" />}>
      <Switch>
        <Route
          path={`${APP_PREFIX_PATH}`}
          component={lazy(() => import(`./commons`))}
        />

         
      </Switch>
    </Suspense>
  );
};

它的路由。这对我来说是一个奇怪的错误，我找不到任何解决方案。我尝试添加“精确”，但它也不起作用。谢谢大家的回复！

【问题讨论】：

标签： javascript reactjs react-native react-router

【解决方案1】：

当您有多个名称相似的路径时，您需要使用“精确”参数。

例如，假设您有 2 个不同的根，例如

<Route path="/v1" component={lazy(() => import(`./v1`))} />
<Route path="/v1/commons" component={lazy(() => import(`./commons`))} />

如果你想去“/v1/commons”，react 路由器将返回第一个匹配项，即“/v1”，而不是返回“/v1/commons”。

为避免您需要添加“精确”。这将确保特定路由器只返回完全匹配。

<Route path="/v1" exact component={lazy(() => import(`./v1`))} />
<Route path="/v1/commons" component={lazy(() => import(`./commons`))} />

【讨论】：

感谢您的回复，但在我的情况下，我只有 1 个组件和路径（目前），当我尝试像 /v1/commons 这样的路由时，它不是路由，但如果我尝试像 /v1 这样的路由，它的路由而且我没有任何其他组件或任何其他路由路径，这就是它奇怪的原因

【解决方案2】：

我认为这是因为您使用的是 `（反引号）而不是 '; React 无法将 ` ... ` 读取为字符串。

【讨论】：

我不会说 JS，但在我看来 OP 并没有尝试使用反引号来分隔它们的字符串文字。我想你可能误解了代码