React 路由器将我重定向到 Hash 路由器，而不是返回到基础 url

Question

Hello I'm trying to redirect my link to one of my components, however I can't do it.

To explain, I have my HomePage which is my main page. It redirects to components through links.

MenuPage

<NavLink to="/administration/"> />Administration</NavLink>

Home page

<BrowserRouter>
       <Route path="/administration/" component={Administration} />
        <Route replace path="/settings/:ID" component={Settings} />
  </BrowserRouter>

I then use Hash Router to redirect to switches and to separate my data on the administration page.

Administration page

<HashRouter>
      <Menu>
        <MenuItem exact  to="/">Tous</MenuItem>
        <MenuItem   to="/avalider">À Valider</MenuItem>
        <MenuItem   to="/valides">Validés</MenuItem>
        <MenuItem   to="/encours">En Cours</MenuItem>
        <MenuItem   to="/terminés">Terminés</MenuItem>
        <MenuItem   to="/litiges">Litiges</MenuItem>
      </Menu>


      <Switch>
      <Route  exact path="/" component={Tous} />
      <Route  path="/avalider" component={Avalider} />
      <Route  path="/valides" component={Validés} />
      <Route  path="/encours" component={Encours} />
      <Route  path="/terminés" component={Terminés} />
      <Route  path="/litiges" component={Litiges} />
      </Switch>
    </HashRouter>

And then in my "All" component, I have my Navlink

<NavLink  to={`/settings/${order.id}`} key={order.id} >

For the moment, my link redirects to

localhost:3000/administration/#/settings/$ID

What I would like from it would be

localhost:3000/settings/$ID

Thanks for your time.

Answer 1

add ./ in your route

 to={`./settings/${order.id}`