Reputation: 11
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
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