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

Posted 2023-02-19

【中文标题】如果路径在 Route React 中是动态的，如何重定向到“/”

【英文标题】：How to redirect to "/" if path is dynamic in 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)

【参考方案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="/" /> 作为您的重定向。在那之后，如果它不起作用，我将停止提供糟糕的建议。