I've had two routes:

<Route path="/client/:id/members" component={Members} />
<Route path="/client/:id/members/:mid" component={MemberProfile} />

why when I'm trigger:

window.location.href = `/client/${id}/members/${mid}`;

then my url is changed to correct form like in the route path but not redirect me to MemberProfile component?

Thanks for any help!

CodePudding user response：

as

<Route path="/client/:id/members" component={Members} />

declared before

<Route path="/client/:id/members/:mid" component={MemberProfile} />

and

/client/${id}/members/${mid}

fit

"/client/:id/members"

Members component will still be rendered.

Consider one of the following:

1. decleare MemberProfile before Members

2. change MembersProfile route to /client/:id/member/:mid for example

3. use exact Route property

CodePudding user response：

Given:

<Route path="/client/:id/members" component={Members} />
<Route path="/client/:id/members/:mid" component={MemberProfile} />

It seems like you are rendering these routes into a Switch component. Remember that the Switch component renders the first child <Route> or <Redirect> that matches the location. This means that route path order and specificity matters.

Order your routes by decreasing specificity. "/client/:id/members/:mid" is more specific than "/client/:id/members" and should render higher in the Switch.

<Switch>
  ...
  <Route path="/client/:id/members/:mid" component={MemberProfile} />
  <Route path="/client/:id/members" component={Members} />
  ...
</Switch>

Additional note

You may want to avoid using window.location.href to redirect as this reloads the entire page, and thus, your app. Use a Redirect component to render a declarative navigation, or use history.replace(`/client/${id}/members/${mid}`); to issue an imperative redirect.