React Router Unable to navigate with Path parameters

user_11097728 0
Viewed 144

I am having an issue navigating react router with path parameters

Here is my setup

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>
    );
}

Here are my Routes

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 = "/";

Now, I want to be able to navigate to the Verify games component which is on route path /verifier.

If I navigate to just /verifier it works, but if I append path parameters it doesn't navigate.

So, /verifer works, but /verifier?name=mekings&&age=25 fails and always reroutes back to the DefaultHome Component

Why?

react-router-v4 react-router-dom reactjs
1 Answers

Have you tried to úse your component as a child instead of a component prop?

Eg:

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

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