Question

我有一个使用Primer-react模板开发的react应用。它具有一个管理仪表板，并且在仪表板侧面板中具有多个路由。我在index.js中设置了Auth路由，当我转到每个路由时，它都可以正常运行。但是当重新加载页面时，页面显示找不到404页面！

我从AuthRoute保护了“ /”路径，因此每个以“ /”开头的路径都受到保护（我在仪表板内部有诸如“ / usertable”，“ / users”，“ / payments等”的路由）。我不确定这里是否发生了错误，因为有些路由（仪表板外部）应该在没有Auth的情况下进行访问，例如“ / Signin”。

我假设，如果我可以保护仪表板内每个路由的确切路径（例如确切路径=“ / 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

重新加载页面时，会收到404，因为您是在实际收到html文档响应之前第一次命中服务器，并且服务器可能仅配置为在index.html上发送GET '/' < / p>

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

请查看此详细答案以获取更多见解：React-router urls don't work when refreshing or writing manually

Answer 2

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

/*  /index.html  200

Answer 3

如果使用 Netlify 并且有 netlify.toml 文件，您可以添加以下内容

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

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

3 个答案: