Hide Url extensions using React-Router-Dom

Question

I'm using react-router-dom to create client-side pages within a React site. This extension is working fine but I'm wondering if there is a way I can hide the URL extensions from appearing within the browser navigation bar.

Here is my code:

class App extends Component {
  render() {
    return (
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/airports">Airports</Link></li>
          <li><Link to="/cities">Cities</Link></li>
          <li><Link to="/courses">Courses</Link></li>
        </ul>

        <Route path="/" exact component={Home}/>
        {/* You don't always have to render a whole component */}
        <Route path="/airports" render={() => (<div> This is the airport route </div>)}/>
        <Route path="/cities" component={City}/>
        <Route path="/courses" component={Courses}/>
      </div>
    );
  }
}

So clicking on Airports will show www.myurl.com/airports, clicking on Cities shows www.myurl.com/cities. Since these pages are created client-side and not server-side, I'd really like to hide these extensions so that whenever I click on these links, it will just show the host name of www.myurl.com.

Hopefully there is an easy way of accomplishing this. Any help is greatly appreciated!

Answer 1

There are two ways to do this:

1. Using Memory History

From the docs:

Memory history doesn't manipulate or read from the address bar. This is how we implement server rendering. It's also useful for testing and other rendering environments (like React Native).

Use one like so:

const history = createMemoryHistory(location)
render(
  <Router history={history}>
    <Route path='/' component={App}>
      <IndexRoute component={Home} />
      <Route path='about' component={About} />
      <Route path='features' component={Features} />
    </Route>
  </Router>,
  document.getElementById('app')
)

2. Using MemoryRouter

From the docs:

A Router that keeps the history of your "URL" in memory (does not read or write to the address bar). Useful in tests and non-browser environments like React Native.

import { MemoryRouter } from 'react-router'

<MemoryRouter>
  <App/>
</MemoryRouter>