React Router. Programmatic redirect to route with multiple parameters not working

Viewed 319

I'm trying to redirect the user back to a previous route via url with two dynamic parameters. However, adding those two parameters causes the redirect to be a no-op.

When I redirect without them it works fine. Also accessing the route via url works fine. It really appears to be the programmatic redirect. I've tried pushing to history stack and using the Link div- to no avail. Could anyone push me into the right direction?

url: onboarding/5f4a3ee7e28892ae792a0107/5f4a3ee7e28892ae792a0105


    goTo(redirectTo) {
        this.setState({ redirectTo });
    }

    renderRedirect() {
        const { redirectTo } = this.state
        const path = `/${redirectTo}`;

        if (!redirectTo) {
            return;
        }
 
        return <Redirect to={path}/>
    }

    render() {
        return (
            <BrowserRouter>
         {this.renderRedirect()}
                <div
                    className={`App ${
                        window.location.pathname !== '/admin' ? 'view' : ''
                    }`}
                >
                    <SchedulePanel />
                    <img className="voxpop-logo" src={VoxPopLogo} alt="logo" />
                    <Switch>
                        <Route
                            path="/onboarding/:eventId/:groupId"
                            exact
                            component={OnboardingView}
                        />
                        <Route path="/profile" exact component={ProfileView} />
                        <Route
                            path="/questions"
                            exact
                            component={QuestionsView}
                        />
                        <Route
                            path="/searching"
                            exact
                            component={SearchingView}
                        />
                        <Route path="/match" exact component={MatchView} />
                        <Route path="/chat" exact component={ChatView} />
                        <Route
                            path="/offboarding"
                            exact
                            component={OffboardingView}
                        />
                        <Route path="/admin" exact component={AdminView} />
                        <Route path="/no-match" exact component={NoMatch} />
                        <Route path="/dev" exact component={Dev}/>
                    </Switch>
                </div>
            </BrowserRouter>
        );
    }
1 Answers

I noticed that in your <Route /> for the /onboarding/:eventId/:groupId route, you have the exact prop. This might be the issue because, as per the docs, the exact prop on a <Route /> means that the URL must match exactly. And this, of course, won't be the case for a dynamic path.

Try it without the exact prop and see if it fixes it!

Related