Javascript 如何避免在react中重新加载页面时出现404错误?
我有一个反应应用程序开发的引物反应模板。它有一个管理仪表板,仪表板侧面板中有多条路线。我在index.js中设置了一个Auth路由,当我转到每个路由时,它都能正常工作。但是当重新加载页面时,页面显示404页面未找到 我从AuthRoute中保护“/”路径,以便每个以“/”开头的路径都受到保护(我在仪表板中有诸如“/usertable”、“/users”、“/payments”等路由)。我不确定这里是否发生了错误,因为有些路由(在仪表板之外)应该在没有身份验证的情况下访问,比如“/登录” 我假设,如果我可以保护仪表板内每个路由的精确路径(如精确路径=“/usertable”),而不是保护所有“/”路径,404问题将得到解决!但当我这样做时,注销后,我可以通过浏览器返回按钮返回仪表板,这会产生另一个问题。 我怎样才能解决这个问题 index.jsJavascript 如何避免在react中重新加载页面时出现404错误?,javascript,reactjs,Javascript,Reactjs,我有一个反应应用程序开发的引物反应模板。它有一个管理仪表板,仪表板侧面板中有多条路线。我在index.js中设置了一个Auth路由,当我转到每个路由时,它都能正常工作。但是当重新加载页面时,页面显示404页面未找到 我从AuthRoute中保护“/”路径,以便每个以“/”开头的路径都受到保护(我在仪表板中有诸如“/usertable”、“/users”、“/payments”等路由)。我不确定这里是否发生了错误,因为有些路由(在仪表板之外)应该在没有身份验证的情况下访问,比如“/登录” 我假设,
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();
从“React”导入React;
从“react router dom”导入{BrowserRouter,Switch,Route,Redirect};
从'react dom'导入{render};
从“/Auth”导入身份验证;
从“./components/AppProvider/AppProvider”导入AppProvider;
从“./containers/Dashboard”导入仪表板;
从“./pages”导入{ForgotPassword,Signin,ResetPassword};
从“./registerServiceWorker”导入registerServiceWorker;
常量AuthRoute=({component:component,…rest})=>(
{
如果(Auth.isAuthenticated()){
返回
}
否则{
返回
}
}} />
)
导出默认渲染(
,document.getElementById('root');
registerServiceWorker();
当您重新加载页面时,您会收到404,因为您在实际收到html文档响应之前第一次点击服务器,并且您的服务器可能只配置为在get'/'时发送您的index.html
您需要设置服务器以捕获所有传入的url(/*
),并呈现index.html
查看此详细答案以了解更多信息:当您重新加载页面时,您会得到一个404,因为您在实际收到html文档响应之前第一次点击服务器,并且您的服务器可能仅配置为在
get'/'时发送index.html
您需要设置服务器以捕获所有传入的url(/*
),并呈现index.html
查看此详细答案以了解更多信息:如果您使用netlify进行部署,请在公用文件夹中创建一个\u redirects
文件,并在其中添加以下行
/* /index.html 200
如果您使用netlify进行部署,请在公用文件夹中创建一个\u redirects
文件,并在其中添加以下行
/* /index.html 200
如果使用Netlify并具有Netlify.toml
文件,则可以添加以下内容
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
如果使用Netlify并具有Netlify.toml
文件,则可以添加以下内容
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
但当我返回index.html文件时,控制台中出现错误,这是“未捕获错误:我的供应商js文件和捆绑js文件的意外标记<”。@PradhumnSharma您能解决这个问题吗?我也有同样的问题。它现在返回的是一个空白的白色页面,而不是404和控制台中的意外令牌错误。谢谢。是的,我已经解决了。事实上,问题是我在返回index.html文件的函数之后使用了webpackdevmiddleware配置。我只需要将其移到该函数上。但当我返回index.html文件时,控制台中出现错误,这是“未捕获错误:我的供应商js文件和捆绑js文件的意外标记<”。@PradhumnSharma您能解决此问题吗?我也有同样的问题。它现在返回的是一个空白的白色页面,而不是404和控制台中的意外令牌错误。谢谢。是的,我已经解决了。事实上,问题是我在返回index.html文件的函数之后使用了webpackdevmiddleware配置。我只需要把它移到那个函数上。