【问题标题】:React Router Unable to navigate with Path parameters反应路由器无法使用路径参数导航
【发布时间】:2021-01-16 03:13:54
【问题描述】:

我在使用路径参数导航反应路由器时遇到问题

这是我的设置

render() {
    return (
        <Switch>
            <Route path={Routes.PASSWORD_RECOVERY} component={ForgotPasswordView}/>
            <Route path={Routes.VERIFY_EMAIL} component={VerifyEmailView}/>
            <Route path={Routes.LOGIN} component={LoginView}/>
            <Route path={Routes.SIGN_UP} component={SignUpView}/>
            <Route path={Routes.VERIFY_RESULTS} component={VerifyGames}/>
            <Route path={Routes.HOME} component={Home}/>
            <Route path={Routes.WELCOME} component={Welcome}/>
            <Route exact path={Routes.DEFAULT} component={DefaultHome}/>
            <Route component={DefaultHome}/>
        </Switch>
    );
}

这是我的路线

static readonly SIGN_UP = "/signup";
static readonly LOGIN = "/login";
static readonly PASSWORD_RECOVERY = "/password_recovery";
static readonly VERIFY_EMAIL = "/verify_email";
static readonly HOME = "/home";
static readonly WELCOME = "/welcome";
static readonly VERIFY_RESULTS = "/verifier";
static readonly DEFAULT = "/";

现在,我希望能够导航到路径路径 /verifier 上的验证游戏组件。

如果我只导航到 /verifier 它可以工作,但如果我附加路径参数它不会导航。

所以,/verifer 有效,但 /verifier?name=mekings&amp;&amp;age=25 失败并始终重新路由回 DefaultHome 组件

为什么?

【问题讨论】:

  • 您能否提供您的 ENUMS 路径,以便我们更清楚 Switch 匹配路径的依据?我没有看到任何明显的问题。您能否将您的代码复制到一个最小的可重现示例running 代码框并在您的问题中链接?
  • 您正在使用 仅呈现第一个匹配的路由。确保/verifier?name=mekings&amp;&amp;age=25 的路线高于/verifier 的路线。

标签: reactjs react-router-dom react-router-v4


【解决方案1】:

您是否尝试过将组件用作子组件而不是组件道具?

例如:

<Switch>
<Route path={Routes.SIGN_UP}>
<Login view/>
</Route>
</Switch>

Please share your code on code sandbox if you still have issues.

【讨论】:

猜你喜欢
  • 2016-04-10
  • 2020-12-31
  • 2019-10-12
  • 2020-10-27
  • 1970-01-01
  • 1970-01-01
  • 2016-05-29
  • 2022-01-17
相关资源
最近更新 更多