URL-адреса React-маршрутизатора не работают при обновлении или записи вручную

Вот frontend обходное решение, я обнаружил, что это не требует изменения ничего на сервере.

Скажем, Вашим сайтом является mysite.com, и у Вас есть Реагировать Маршрут на mysite.com/about. В index.js, где Вы монтируете свой компонент верхнего уровня, можно поместить другой Маршрутизатор как:

ReactDOM.render(
<Router>
    <div>
        <Route exact path="/" component={Home} />
        <Route exact path="/about"
            render={(props) => <Home {...props} refreshRout={"/about"}/>}
        />
    </div>
</Router>,

я предполагаю, что Вам определили местоположение исходного Маршрутизатора где-нибудь ниже компонента верхнего уровня в виртуальном DOM. Также необходимо поймать URL в .urls при использовании Django как:

urlpatterns = [
       path('about/', views.index),
]

Это будет зависеть, на каком бэкенде Вы используете, как бы то ни было. Запрос mysite/about получит Вас в index.js (где Вы монтируете компонент верхнего уровня), где можно использовать опору рендеринга Маршрута, а не опору компонента, и передавать '/about' как опору к, в этом примере, Домашнем компоненте.

В Доме, в любом componentDidMount () или useEffect () рычаг, сделайте:

useEffect() {   
   //check that this.props.refreshRoute actually exists before executing the 
   //following line    
   this.props.history.replace(this.props.refreshRoute);
}

я предположил, что Ваш Домашний компонент представляет что-то как:

<Router>
   <Route exact path="/" component={SomeComponent} />
   <Route path="/about" component={AboutComponent} />
</Router>

Кредит к ( опоры Передачи к компоненту, представленному, Реагируют Маршрутизатор ) для того, как передать опоры компонентам в Маршрутах.

можно попытаться читать это все, хотя это не является моим:

https://www.andreasreiterer.at/fix-browserrouter-on-apache /

Фиксация app’s, направляющего Теперь here’s, как наконец зафиксировать маршрутизацию. Чтобы сказать Apache перенаправлять запросы к index.html, где наше приложение живет, мы должны изменить .htaccess файл. Если еще нет такого файла в Вашей app’s папке, просто создайте ее.

Затем быть уверенным, что Вы вставляете те 4 строки, которые волшебно сделают Вашу работу маршрутизации.

опции-MultiViews RewriteEngine На % RewriteCond {REQUEST_FILENAME}!-f RewriteRule ^ index.html [QSA, L] После того, как мы поместим это .htaccess файл в тот же каталог как index.html, Apache, перенаправит каждый новый запрос непосредственно к Вашему приложению.

Премия: Развертывание Реагировать приложение к подкаталогу

, Если you’re, развертывающий Ваше приложение в подкаталог, таким образом, it’s доступный, например, через https://myapp.com/the-app, you’ll скоро, замечают, что существует другая проблема. Каждый щелчок к новому маршруту преобразует URL к чему-то как https://myapp.com/route-abc †“, который повредится снова после перезагрузки. Но существует простая фиксация для этого:

BrowserRouter имеет опору, названную базовым именем, где можно указать путь подкаталога:

С этого времени, каждый Маршрут как контакты / приведет к URL как http://myapp.com/the-app/contacts .

Мы использовали 404 подхода обработки экспресса

// path to the static react build directory    
const frontend = path.join(__dirname, 'react-app/build');

// map the requests to the static react build directory
app.use('/', express.static(frontend));

// all the unknown requests are redirected to the react SPA
app.use(function (req, res, next) {
    res.sendFile(path.join(frontend, 'index.html'));
});

Работы как очарование. Живая демонстрация наш сайт