Обновление страницы с помощью React Router

Question

Я использую React Router в своем проекте React.Моя конкретная проблема связана с обновлением страницы, когда ее нет на целевой странице (т. Е. Просто "/" для маршрута).

Я создаю игру, и, например, у меня есть компонент страницы «Как играть», который я хочу визуализировать по маршруту «Howtoplay».Я могу попасть туда просто отлично, но потом, если я обновлю в этот момент, мой браузер просто покажет «не могу получить / как играть».

Вот маршрутизация, настроенная в app.js:

<Router>
     <Route exact path="/" component={Landing}/>
     <Route path="/matchmaking" component={Matchmaking}/>
     <Route path="/games" component={Games}/>
     <Route path="/howtoplay" component={HowToPlay}/>
</Router>

, а компонент HowToPlay является базовым функциональным компонентом:

export default ()=>{
    return (
        <h1>This is the how to play page component</h1>
    );
}

Структура моей папки:

.
+--public
|---index.html
+--src
|---index.js
    +--components
    |---app.js

Мое главное недоразумение заключается в том, что я не вижу разницы между моими настройками и настройками в документации по React Router на их веб-сайте, а их функции имеют желаемую функциональность - оставаться на странице после обновления.