React Router: do not change URL for specific pages

Viewed 520

Is there a way to not change the URL for some pages?

I know that using "MemoryRouter", I can switch to different pages using history.push without changing the URL at all. However, I want to change the URL for some pages. Is there a way to do this?

Current code:

import {Route, BrowserRouter as Router, Switch} from 'react-router-dom';
import {createMemoryHistory} from 'history';

return (
    <Router basename="/d/home_page" history={history}>
              <Switch>
                  // I want to change the URL for this page
                  <Route path="/products">
                    <Products />
                  </Route>
                  // I want to change the URL for this page
                  <Route path="/files">
                    <Files />
                  </Route>
                  // I do not want to change the URL for this page
                  <Route path="/do_not_change_url">
                    <DoNotChangeURL />
                  </Route>

1 Answers

Have you tried doing this?

import {Route, BrowserRouter as Router, MemoryRouter} from 'react-router-dom';
import {createMemoryHistory} from 'history';
...
return (
    <Router basename="/d/home_page" history={history}>
      <div>
          // I want to change the URL for this page
          <Route path="/products">
            <Products />
          </Route>
          // I want to change the URL for this page
          <Route path="/files">
            <Files />
          </Route>
          <MemoryRouter>
             <Route path="/do_change_url">
               <DoNotChangeURL />
             </Route>
          </MemoryRouter>
      <div>
    <Router

or

import {Route, BrowserRouter as Router, Switch, MemoryRouter} from 'react-router-dom';
import {createMemoryHistory} from 'history';
...
return (
    <Router basename="/d/home_page" history={history}>
      <Switch>
          // I want to change the URL for this page
          <Route path="/products">
            <Products />
          </Route>
          // I want to change the URL for this page
          <Route path="/files">
            <Files />
          </Route>
          <MemoryRouter>
             <Route path="/do_change_url">
               <DoNotChangeURL />
             </Route>
          </MemoryRouter>
      <Switch>
    <Router
Related