Route doesn’t render correctly

dear users, I’ve faced a problem with React Router. I’ve 2 components: DriverPage.js and UserTrans.js.

<Route path={`${adminBase}/users/:id`} component={DriverPage}/>
<Route path={`${adminBase}/users/id/userTrans`} component={UserTransactions}/>

I need to go to the UserTransactions component by clicking the <Link> in DriverPage component. But I also use Modal window in DriverPage accordingly to the documentation.

<Link> which opens Modal

<Link to={{
  pathname: `${location.pathname}/editUser`,
  state: {
  background: location,
  type: 'editUser',
  data: {
  fullName, 
  phone, 
  mail, 
 }
 }
}}>
  <Btn id="editUser" classNames="menu-btn">edit Data</Btn>
</Link>

Condition with <Route> of modal

let background = location.state && location.state.background;
{background && <Route path={match.url} children={<Popup type={location.state.type} data={location.state.data}/>} />}

And <Link> which redirects to the UserTransactions:

<Link to={{
  pathname: `${params.id}/userTrans`,
  state: {
   userId: params.id
  }
}}>
 <Btn>Все транзакции пользователя</Btn>
</Link>

The problem is when I click on the UserTransaction Link the URL changes but nothing happens and I’m still staying on the DriverPage. When I add exact attribute to the DriverPage Route the UserTransaction components work but Modal doesn’t.

Answer

You should add exact to make sure it renders correctly

<Route exact path={`${adminBase}/users/id/userTrans`} component={UserTransactions}/>
<Route exact path={`${adminBase}/users/:id`} component={DriverPage}/>