如果路径在 Route React 中是动态的，如何重定向到“/”答案

【问题标题】：How to redirect to "/" if path is dynamic in Route React如果路径在 Route React 中是动态的，如何重定向到“/”
【发布时间】：2021-10-19 18:19:07
【问题描述】：

<Router>
    <Switch>
        <Route
              exact
              path="/path1/"
              component={Page1} //(1)
            />

        {details && details.show_page && (
              <Route
                path={`/${details && details.page_url}`} //path2
                component={Page2}
              />
            )} //(2)
        <Redirect from="*" to="/" />
    </Switch>
</Router>

当用户输入无效路径（未包含在路由器中）时，我需要将用户重定向到“/”。
当用户输入“path1”时，他将被重定向到“path1”就好了（1）
当用户输入动态的“path2”时，他将被重定向到“/”（2）

额外信息：我正在使用 Redux 来获取 path2 的值，所以我正在路由器内部检查它的值。(2)

【问题讨论】：

标签： reactjs redux react-router

【解决方案1】：

我认为您应该将其添加为最后一条路线：<Route><Redirect to="/"/></Route>

<Router>
    <Switch>
        <Route
              exact
              path="/path1/"
              component={Page1} //(1)
            />

        {details && details.show_page && (
              <Route
                path={`/${details && details.page_url}`} //path2
                component={Page2}
              />
            )} //(2)
        <Route><Redirect to="/"/></Route>
    </Switch>
</Router>

【讨论】：

@Miss.Tea 我添加了完整的路由器代码。这在我的项目中按预期工作。

【解决方案2】：

试试这个...通常重定向需要 if/else 条件才能正常工作。

<Router>
    <Switch>
        <Route
            exact
            path="/path1/"
            component={Page1}
        />

        {details && details.show_page ? (
            <Route
                path={`/${details && details.page_url}/`}
                component={Page2}
            />
        ) : <Redirect from="*" to="/" />
        }
    </Switch>
</Router>

【讨论】：

它仍然将我重定向到“/”
尝试使用这个而不是重定向<Route path='*' exact={true} component={MyDefaultComponent} />。
如果这不起作用，那么试试这个。 <Redirect to="/" /> 作为您的重定向。在那之后，如果它不起作用，我将停止提供糟糕的建议。