Борьба с регулярным выражением для маршрута

Question

Я использую React Router 4. У меня есть только один компонент (на данный момент), и я бы хотел, чтобы маршрут соответствовал этому:

/
/home
/@prd78

В случае третьего, я бы хотел, чтобы часть после @ стала параметром.

Я пробовал это, но это явно неправильно:

<BrowserRouter>
    <Route path="/|home|product|@:ref(\w+)/" component={App} />
</BrowserRouter>

У меня могут быть разные маршруты, но в этом случае приложение будет загружено столько раз.

Спасибо за вашу помощь.

Answer 1

<Route exact path="/" component={App} />
<Route path="/home" component={App} />
<Route path="/@:ref" component={App} />

И затем получить к ним доступ, используя:

const App = ({ match }) => (
    <div>
        <p>Ref: {match.params.ref}</p>
    </div>
);