在react中重新加载页面时如何避免404错误？

Question

我有一个用 Primer-react 模板开发的 React 应用程序。它有一个管理仪表板，在仪表板侧面板中有几个路由。我在我的 index.js 中设置了一个 Auth 路由，当我去每条路由时它都运行良好。但是当重新加载页面时，页面显示找不到 404 页面！

我保护来自 AuthRoute 的“/”路径，以便保护以“/”开头的每条路径（我在仪表板内有路由，如“/usertable”、“/users”、“/payments”等）。我不确定错误是否发生在这里，因为有一些路由（仪表板外）应该在没有身份验证的情况下访问，例如“/Signin”。

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

索引.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 文档响应之前第一次访问了服务器，并且您的服务器可能仅配置为发送您index.html的GET '/'

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

查看此详细答案以获取更多见解：React-router urls 在手动刷新或写入时不起作用