steve sizer
steve sizer

Reputation: 11

React router not matching route

I have my react router code that looks like below...

 <Router>
        <Switch>
            <Route path='/login' exact component={Login} />

            <Route path='/clients/:slug' exact>
                {props.isAuthenticated ? (
                <ClientLayout>
                    <Switch>
                        <Route exact path="/clients/:slug/planning/:planning_id/short-term-plans/:id" component={ShortTermPlan} />
                        <Route exact path="/clients/:slug/planning/:id" component={Planning} />
                        <Route exact path="/clients/:slug" component={Client} />
                    </Switch>
                </ClientLayout>
                ) : <Redirect to="/login" />}
            </Route>

            <Route>
            {props.isAuthenticated ? (
                <ApplicationLayout>
                    <Switch>
                        <Route exact path="/" component={Clients} />
                        <Route exact path="/programs" component={Programs} />
                        <Route exact path="/programs/new" component={NewProgram} />
                        <Route exact path="/programs/:id/workouts" component={EditProgram} />
                        <Route exact path="/library/exercises" component={Exercises} />
                        <Route exact path="/library/exercises/new" component={NewExercise} />
                        <Route exact path="/library/exercises/:id/edit" component={EditExercise} />
                        <Route component={NotFound} />
                    </Switch>
                </ApplicationLayout>
                ) : <Redirect to="/login" />}
            </Route>
        </Switch>
    </Router>

when I go to the following URL I get Not Found.

http://localhost:3000/clients/john-doe/planning/1

any help would be appreciated :)

UPDATE

I have removed the ? from the second route and reordered the routes in the second route but still no change.

Upvotes: 1

Views: 235

Answers (1)

new Q Open Wid
new Q Open Wid

Reputation: 2313

As noted, in the second <Route> element, there is a ? in the path prop. Also, big advice, try to list the longer routes before the shorter routes for most routing. See one of my previous answers: here for why.

Upvotes: 1

Related Questions