如何避免React中重新加载页面时出现404错误？

Question

我有一个反应应用程序开发的底漆-反应模板。它有一个管理仪表板，在仪表板侧板中有几条路由。我已经在我的index.js中设置了一个身份验证路由，当我访问每条路由时，它都运行得很好。但是当重新加载页面时，页面显示404页面找不到！

我保护“/”路径不受AUthrote的影响，这样每个以“/”开头的路径都受到保护（我在仪表板中有路由，如“/usertable”、“/users”、“/payments”等）。我不确定这里是否发生了错误，因为有些路由（在仪表板之外）应该在没有“/signin”之类的身份验证的情况下访问。

我假设如果我可以保护仪表板内的每条路由的精确路径（像exact path=“/usertable”）而不是保护所有“/”路径，404问题就会解决！但当我这样做时，注销后，我可以通过浏览器返回按钮返回仪表板，这会产生另一个问题。我该怎么解决这个？

index.js

import React from 'react';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import { render } from 'react-dom';
import Auth from './auth';
import AppProvider from './components/AppProvider/AppProvider';
import Dashboard from './containers/Dashboard';
import { ForgotPassword, Signin, ResetPassword } from './pages';
import registerServiceWorker from './registerServiceWorker';

const AuthRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => {
    if (Auth.isAuthenticated()) {
      return <Component {...props} />
    }
    else {
      return <Redirect to={{ pathname: '/signin' }} />
    }
  }} />
)

export default render(
  <AppProvider>
    <BrowserRouter>
      <Switch>
        <Route exact path="/forgot" component={ForgotPassword} />
        <Route exact path="/signin" component={Signin} />
        <Route exact path="/reset/:token?" component={ResetPassword} />
        <AuthRoute path="/" component={Dashboard} />
        <Route path="/" component={Dashboard} />
      </Switch>
    </BrowserRouter>
  </AppProvider>
  , document.getElementById('root'));

registerServiceWorker();

Answer 1

如果您使用netlify进行部署，那么在公用文件夹中创建一个_redirects文件，并向其中添加以下行。

/*  /index.html  200

Answer 2

当您重新加载页面时，您会得到一个404，因为您在实际接收html文档响应之前首先访问了服务器，并且您的服务器可能只配置为在get'/'时发送index.html

您需要将服务器设置为捕获所有传入的url(/*)并呈现index.html

请查看以下详细答案以了解更多信息：React-Router URL在手动刷新或写入时不起作用