Reactjs 直接从浏览器地址栏访问时返回空白页

这是我的App.js文件，其中定义了所有路由

import React, { useState, useEffect, createContext } from 'react'
import { Route, Switch } from 'react-router-dom'
import Posts from './components/Posts'
import Login from './components/Login'
import { Home } from './components/Home'
import './assets/css/style.css'
import Layout from './components/Layout'
import Account from './components/Account'
import AppliedJobs from './components/AppliedJobs'
import About from './components/About'
import Contact from './components/Contact'
import { MultiStepForm } from './components/MultiStepForm'
import ForgotPassword from './components/ForgotPassword'
import ResetPassword from './components/ResetPassword'
import PrivacyPolicy from './components/PrivacyPolicy'
import { toast } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
export const userContext = createContext() 
toast.configure()
const App = (props) =>{
  const [auth, setAuth] = useState();
  useEffect(() => {
    if (sessionStorage.getItem('token') !== null) {
      setAuth(true);
    } else {
      setAuth(false);
    }
  }, []);

  console.log('Auth Status',auth)
  
  let routes = (
    <Switch>
      <Route exact path='/' component={()=> <Home auth={auth} />}/>
      <Route exact path='/job/:id' component={Posts}/>
      <Route exact path='/login' component={() => <Login setAuth={setAuth}/>}/>
      <Route exact path='/accout' component={Account}/>
      <Route exact path='/appliedjobs' component={AppliedJobs}/>
      <Route exact path='/about' component={()=> <About/>}/>
      <Route exact path='/contact' component={Contact}/>
      <Route exact path='/Registration' component={MultiStepForm}/>
      <Route exact path='/forgot' component={ForgotPassword}/>
      <Route exact path='/reset/:id' component={ResetPassword}/>
      <Route exact path='/privacypolicy' component={PrivacyPolicy}/>
    </Switch>
  )
  return(
          <div>
            <Layout auth={auth} >{routes}</Layout>
          </div>
  )
}


export default App

import React，{useState，useffect，createContext}来自“React”
从“react router dom”导入{Route，Switch}
从“./components/Posts”导入帖子
从“./components/Login”导入登录名
从“./components/Home”导入{Home}
导入“./assets/css/style.css”
从“./components/Layout”导入布局
从“./components/Account”导入帐户
从“./components/AppliedJobs”导入AppliedJobs
从“./components/About”导入关于
从“./components/Contact”导入联系人
从“./components/MultiStepForm”导入{MultiStepForm}
从“./components/ForgotPassword”导入ForgotPassword
从“./components/ResetPassword”导入ResetPassword
从“./components/PrivacyPolicy”导入PrivacyPolicy
从“react toastify”导入{toast}
导入“react toastify/dist/react toastify.css”
export const userContext=createContext（）
toast.configure（）
常量应用=（道具）=>{
const[auth，setAuth]=useState（）；
useffect（（）=>{
if（sessionStorage.getItem（'token'）！==null）{
setAuth（真）；
}否则{
setAuth（假）；
}
}, []);
console.log（'Auth Status'，Auth）
让路线=(
}/>
}/>
}/>
)
返回(
{routes}
)
}
导出默认应用程序

---

当我试图从直接URL访问任何路由时，它会显示一个空白页面。我对此做了大量研究，但任何解决方案都不适用于我检查您是否正在验证

setAuth（true）和在布局组件中正确传递道具
只需将
更改为
您的应用程序是否在某处有一个
路由器
组件？我使用了HOC。我有一个布局组件包装所有的应用程序<代码>从“React”导入React；从“./Navbar”导入Navbar从“./PageFooter”导入PageFooter常量布局=（props）=>{return（{props.children}）}导出默认布局这并不能真正回答问题。那么，您可以包含所有相关代码吗？@drewrese您还需要哪些代码？我想我要的是从
App
到我认为应该为您的应用渲染
路由器的组件，以便我可以看到它是如何尝试匹配路径和渲染页面的。我要求所有相关的代码生成一个示例。是的，在预回迁过程中，所有内容都能正常工作，但当我尝试从URL栏访问任何路由时，它会显示白色空白页。在从URL访问时，请检查验证状态是否为
true