Router: [Feature] Basename API

[kbrgl]

Is it possible to get an API for basename? So that we can do something like:

<Router basename="/admin">
  <Home path="/" />
  <Login path="/login" />
</Router>

and have Home at /admin, and Login at /admin/login.

Documentation for React Router's basename API

[px-tristan-davey]

I did something similar by:

const RouteWrapper = ({ children }) => <React.Fragment>{children}</React.Fragment>;

<Router>
  <RouteWrapper path="/admin">
    <Home path="/" />
    <Login path="/login" />
  </RouteWrapper>
  <RouteWrapper path="/admin-two">
    <Home path="/" />
    <Login path="/login" />
  </RouteWrapper>
</Router>

This was so I could see an overview of all my routes via indentation. If there's a better way please let me know!

[kbrgl]

@px-tristan-davey I wasn't aware you could do that, neat! I guess that works fine, but I'll leave this issue open.

[Lucretius]

It appears that a prop exists called basepath which accomplishes this same thing - though it is specified in the documentation as normally used internally.

import './App.css';

import { Router } from '@reach/router';
import React, { Component } from 'react';

const Page1 = props => <div>page1</div>;
const Page2 = props => <div>page2</div>;
const Page3 = props => <div>page3</div>;

class App extends Component {
  render() {
    return (
      <Router basepath="test">
        <Page1 path="page1" />
        <Page2 path="page2" />
        <Page3 path="page3" />
      </Router>
    );
  }
}

export default App;

Page1, Page2, Page3 are all accessible at /test/page1 and so on.

[kbrgl]

Ah, that's perfect — not sure how I missed it. Thanks!