当我路由到 /supportservice/settings 时，我的反应项目上出现 404 页面答案

【问题标题】：404 page on my react project appears when I route to /supportservice/settings当我路由到 /supportservice/settings 时，我的反应项目上出现 404 页面
【发布时间】：2020-06-11 07:30:46
【问题描述】：

每当我在此页面时路由到 /supportservice/settings 页面加载 404 页面会在一段时间后出现在屏幕上 /supportservice/settings 页面将出现在屏幕上。当我路由到 /supportservice/settings 时，我已尽力使 404 页面停止显示。 supportservice 有后端数据获取，这需要一点时间，同时在屏幕上加载 404 页面呈现，在获取数据后一段时间内支持服务贷方。这几天我一直在做这个。

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Loader from './loader';
import AuthProvider from './authContext';
const SupportServiceDashboard = React.lazy(() =>
  import('../components/support-service/Dashboard/supportServiceDashboard')
);
const PrivateRoute = React.lazy(() =>
  import('./privateRoute')
);
const SupportServiceConfirmationPage = React.lazy(() =>
  import('./adminConfirmationPage')
);
const SupportServiceResetPassword = React.lazy(() => 
  import('../components/support-service/registration/resetPassword')
);
const PersonnelDashboard = React.lazy(() => 
  import('../components/personnel/home/personnelDashboard')
);
const Signup = React.lazy(() =>
  import('../components/personnel/registration/signUp')
);
const SignIn = React.lazy(() =>
  import('../components/personnel/registration/signIn')
);
const ResetPassword = React.lazy(() =>
  import('../components/personnel/registration/resetPassword')
);
const ForgetPassword = React.lazy(() =>
  import('../components/personnel/registration/forgetPassword')
);
const SupportServiceSignUp = React.lazy(() =>
  import('../components/support-service/registration/supportServiceSignUp')
);
const SupportServiceSignIn = React.lazy(() =>
  import('../components/support-service/registration/supportServiceSignIn')
);
const SupportServiceForgetPassword = React.lazy(() =>
  import('../components/support-service/registration/supportServiceForgetPassword')
);
const ConfirmPage = React.lazy(() =>
  import('./confirmPage')
);
const SupportServiceNavBar = React.lazy(() =>
  import('../components/support-service/supportServiceNavbar')
);
const ManageTimesheet = React.lazy(() =>
  import('../components/support-service/Manage-timesheet/ManageTimesheet')
);
const SupportServiceSettings = React.lazy(() => 
  import('../components/support-service/settings_page/supportServiceSettings')
);
const PersonnelList = React.lazy(() => import('../components/support-service/settings_page/personnel-list'));

const PageNotFound = React.lazy(() => import('../utils/pageNotFound'));

const ClientList = React.lazy(() => import('../components/support-service/settings_page/clientList'));


function Routes() {
  const change = true;
  return (
    <div className="App">
      {/* <Nav /> */}
      <Router>
        <AuthProvider>
        <Switch>
          <Suspense fallback={<Loader />}>
            <Route exact path="/" component={SignIn} />
            <Route exact path="/signup" component={Signup} />
            <Route exact path="/login" component={SignIn} />
            <Route exact path="/forgotpassword" component={ForgetPassword} />
            <Route exact path="/passwordreset/:id" component={ResetPassword} />
            <Route exact path="/supportservice/passwordreset/:id" component={SupportServiceResetPassword} />
            <Route exact path="/supportservice/signup" component={SupportServiceSignUp} />
            <Route
              exact
              path="/supportservice/login"
              component={SupportServiceSignIn}
            />
            <Route
              exact
              path="/login/:id"
              component={ConfirmPage}
            />
            <Route
              exact
              path="/supportservice/login/:id"
              component={SupportServiceConfirmationPage}
            />
            <Route
              exact
              path="/supportservice/forgotpassword"
              component={SupportServiceForgetPassword}
            />
            {/* <Route
              exact
              path="/pagenotfound"
              component={PageNotFound}
            /> */}

            <Route
              exact
              path="/supportservice/forgotpassword"
              component={SupportServiceForgetPassword}
            />
            <Route
              exact
              path="/supportservice/nav"
              component={SupportServiceNavBar}
            />
            <Route
              exact
              path="/supportservice/manage-timesheet"
              component={ManageTimesheet}
            />


            <PrivateRoute exact path='/supportservice/dashboard' component={SupportServiceDashboard} role='support_service' redirect='/supportservice/login'/>
            <PrivateRoute exact path='/dashboard' component={PersonnelDashboard} role='personnel' redirect='/login'/>
            <PrivateRoute exact path='/supportservice/settings' component={SupportServiceSettings} role='support_service' redirect='/supportservice/login'/>
             <PrivateRoute path='/supportservice/settings/personnel_list' component={PersonnelList} role='support_service' redirect='/supportservice/login'/>
            <PrivateRoute path='/supportservice/settings/client_list' component={ClientList} role='support_service' redirect='/supportservice/login'/>

            <Route component={PageNotFound} />
          </Suspense>
        </Switch>
        </AuthProvider>
      </Router>
    </div>
  );
}

export default Routes;

【问题讨论】：

这个“支持服务/设置”是否存在？如果存在，请检查拼写是否正确？
您将其重新路由到没有路由的 /supportservice/login ，因此它是 404？
我已经显示了完整的路线代码，你现在可以去查看完整的路线。看看你是否有解决问题的办法。谢谢

标签： javascript html reactjs react-redux react-router

【解决方案1】：

在对这个问题进行了几天的研究后，我发现我必须使用 react Suspense 作为所有路由的父容器，这修复了错误。感谢所有人，尤其是那些发布了一些建议的人。快乐编码:)。

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import ReduxToastr from 'react-redux-toastr';
import Loader from './loader';
const SupportServiceDashboard = React.lazy(() =>
    import('../components/support-service/Dashboard/supportServiceDashboard')
);
const PrivateRoute = React.lazy(() => import('./privateRoute'));
const SupportServiceConfirmationPage = React.lazy(() => import('./adminConfirmationPage'));
const SupportServiceResetPassword = React.lazy(() =>
    import('../components/support-service/registration/resetPassword')
);
const PersonnelDashboard = React.lazy(() => import('../components/personnel/home/personnelDashboard'));
const Signup = React.lazy(() => import('../components/personnel/registration/signUp'));
const SignIn = React.lazy(() => import('../components/personnel/registration/signIn'));
const ResetPassword = React.lazy(() => import('../components/personnel/registration/resetPassword'));
const ForgetPassword = React.lazy(() => import('../components/personnel/registration/forgetPassword'));
const SupportServiceSignUp = React.lazy(() =>
    import('../components/support-service/registration/supportServiceSignUp')
);
const SupportServiceSignIn = React.lazy(() =>
    import('../components/support-service/registration/supportServiceSignIn')
);
const SupportServiceForgetPassword = React.lazy(() =>
    import('../components/support-service/registration/supportServiceForgetPassword')
);
const ConfirmPage = React.lazy(() => import('./confirmPage'));
// const SupportServiceNavBar = React.lazy(() => import('../components/support-service/supportServiceNavbar'));
const ManageTimesheet = React.lazy(() => import('../components/support-service/Manage-timesheet/ManageTimesheet'));
const SupportServiceSettings = React.lazy(() =>
    import('../components/support-service/settings_page/supportServiceSettings')
);
const PersonnelList = React.lazy(() => import('../components/support-service/settings_page/personnel-list'));

const PageNotFound = React.lazy(() => import('../utils/pageNotFound'));

const ClientList = React.lazy(() => import('../components/support-service/settings_page/clientList'));

function Routes() {
    return (
        <Suspense fallback={<Loader />}>
            <Router>
                {/* <div className="App"> */}
                <ReduxToastr
                    timeOut={5000}
                    newestOnTop={false}
                    preventDuplicates
                    position="top-center"
                    getState={state => state.toastr}
                    transitionIn="fadeIn"
                    transitionOut="fadeOut"
                    progressBar
                    closeOnToastrClick
                />
                <Switch>
                    <Route exact path="/" component={SignIn} />
                    <PrivateRoute path="/" exact component={PersonnelDashboard} role="personnel" redirect="/login" />
                    <PrivateRoute
                        path="/supportservice"
                        exact
                        component={SupportServiceDashboard}
                        role="support_service"
                        redirect="/supportservice/login"
                    />
                    <Route path="/signup" exact component={Signup} />
                    <Route path="/login" exact component={SignIn} />
                    <Route path="/forgotpassword" exact component={ForgetPassword} />
                    <Route path="/passwordreset/:id" exact component={ResetPassword} />
                    <Route exact path="/supportservice/passwordreset/:id" component={SupportServiceResetPassword} />
                    <Route path="/supportservice/signup" component={SupportServiceSignUp} />
                    <Route exact path="/supportservice/login" component={SupportServiceSignIn} />
                    <Route exact path="/login/:id" component={ConfirmPage} />
                    <Route exact path="/supportservice/login/:id" component={SupportServiceConfirmationPage} />
                    <Route path="/supportservice/forgotpassword" component={SupportServiceForgetPassword} />
                    <Route exact path="/supportservice/forgotpassword" component={SupportServiceForgetPassword} />
                    <Route exact path="/supportservice/manage-timesheet" component={ManageTimesheet} />

                    <PrivateRoute
                        exact
                        path="/supportservice/dashboard"
                        component={SupportServiceDashboard}
                        role="support_service"
                        redirect="/supportservice/login"
                    />
                    <PrivateRoute exact path="/dashboard" component={PersonnelDashboard} role="personnel" redirect="/login" />
                    <PrivateRoute
                        exact
                        path="/supportservice/settings"
                        component={SupportServiceSettings}
                        role="support_service"
                        redirect="/supportservice/login"
                    />
                    <PrivateRoute
                        exact
                        path="/supportservice/settings/personnel_list"
                        component={PersonnelList}
                        role="support_service"
                        redirect="/supportservice/login"
                    />
                    <PrivateRoute
                        path="/supportservice/settings/client_list"
                        component={ClientList}
                        role="support_service"
                        redirect="/supportservice/login"
                    />
                    <Route component={PageNotFound} />
                </Switch>
            </Router>
        </Suspense>
    );
}

export default Routes;

【讨论】：

【解决方案2】：

只需从 PageNotFound Route 中删除 path=" "。

       <Route exact component={PageNotFound} />

【讨论】：

我尝试在路线上使用精确，但我一直遇到同样的问题。问题是由于后端数据获取，页面需要时间加载，因为 /supportservice/settings 正在加载 404 页面，当数据获取完成时，/supportservice/settings 页面将出现。这几天我一直在做这个。
感谢您的建议。我很感激。我已经显示了完整的路线代码，现在您可以查看它，看看哪些地方做得不对。再次感谢。
您正在使用。你能分享一下私人路线是如何工作的吗？

【解决方案3】：

试试<Route exact path='*' component={PageNotFound} />

【讨论】：