Javascript React.js路由器转到其他页面会呈现空白页面

首先，我使用的是无状态组件（功能性） 我遇到的问题是： 当通过链接组件转到另一条路径时，我得到空白页，在刷新页面后，组件加载。 我的所有路线都在App.js中

<BrowserRouter>
    <Switch>
      <Route path="/panele" component={Dashboard}  />
      <Route path="/prisijungimas" component={Login} />
      <Route path="/skelbimas/:id">
        <HeadLine>
          <h1>
            SURASK DARBĄ <span>GREIČIAU</span> IR <span>EFEKTYVIAU</span>
          </h1>
        </HeadLine>
        <SingleJobPost />
      </Route>
      <Route exact path="/" component={AllJobPosts} />
    </Switch>
</BrowserRouter>

苏拉克达尔布雷乔伊酒店

))

老实说，我在这里有点绝望。当我在加载的路由组件页面上没有确切的属性时-但它彼此堆叠-这对我来说不合适

编辑： 仪表板组件：

 const Dashboard = props => {
  let data = JSON.parse(sessionStorage.getItem("user"));
  let history = useHistory();
  let { path, url } = useRouteMatch();

  let header = new URL(window.location.href).searchParams.get("header");

  return (
    <>
      {data === null ? (
        <>{history.push("/prisijungimas")}</>
      ) : (
        <DashboardWrapper>
          <Navigation>
            <DashboardLogo>
              <img src={dashboardLogo} />
              <h1>Valdymo panelė</h1>
            </DashboardLogo>

            <nav>
              <ul>
                <li>
                  <Link to="/panele/skelbimuvaldymas?header=Valdykite sukurtus darbo pasiūlymus">
                    Sukurtų darbo pasiūlymų valdymas
                  </Link>
                </li>
                <li>
                  {" "}
                  <Link path="/panele/valdymas">Pranešimai</Link>
                </li>
                <li>
                  {" "}
                  <Link path="/panele/valdymas">Pagalbos centras</Link>
                </li>
                <li>
                  {" "}
                  <Link path="/panele/valdymas">Vartotoju valdymas</Link>
                </li>
                <li>
                  {" "}
                  <Link path="/panele/valdymas">Logs</Link>
                </li>
                <li>
                  {" "}
                  <Link path="/panele/valdymas">Mano profilis</Link>
                </li>
              </ul>
            </nav>
          </Navigation>

          <EditorWindow>
            <EditorHeader>
              <h1>{header}</h1>
            </EditorHeader>
            <Editor id="style-1">
              <Switch>
                <Route path={`${path}/skelbimas`}>
                  <JobPost />
                </Route>
                <Route
                  path={`${path}/skelbimuvaldymas`}
                  component={ControlJobPost}
                />
              </Switch>
            </Editor>
          </EditorWindow>
        </DashboardWrapper>
      )}
    </>
  );
};

const Dashboard=props=>{
让data=JSON.parse（sessionStorage.getItem（“用户”）；
让历史=使用历史（）；
让{path，url}=useRouteMatch（）；
let header=新URL（window.location.href）.searchParams.get（“header”）；
返回(
{data==null(
{history.push（“/prisijungimas”）}
) : (
瓦尔迪莫小组会议


苏库尔特·达博·帕西·莱姆·瓦尔迪马斯


{" "}
普兰斯伊迈


{" "}
帕加尔博斯中心酒店


{" "}
瓦尔托托朱瓦尔德马斯酒店


{" "}
日志


{" "}
马诺·普瑞菲利斯酒店


{header}
)}
);
};

使组件有状态，并通过状态处理数据

const Dashboard = props => {
  const [data, setData] = useState();
  let history = useHistory();
  let { path, url } = useRouteMatch();

  useEffect(() => {
    let data = JSON.parse(sessionStorage.getItem("user"));
    setData(() => {
      data
    });
  }, []);

  let header = new URL(window.location.href).searchParams.get("header");

  return (
    <>
      {data === null ? (
        <>{history.push("/prisijungimas")}</>
      ) : (
        <DashboardWrapper>
          <Navigation>
            <DashboardLogo>
              <img src={dashboardLogo} />
              <h1>Valdymo panelė</h1>
            </DashboardLogo>

            <nav>
              <ul>
                <li>
                  <Link to="/panele/skelbimuvaldymas?header=Valdykite sukurtus darbo pasiūlymus">
                    Sukurtų darbo pasiūlymų valdymas
                  </Link>
                </li>
                <li>
                  {" "}
                  <Link path="/panele/valdymas">Pranešimai</Link>
                </li>
                <li>
                  {" "}
                  <Link path="/panele/valdymas">Pagalbos centras</Link>
                </li>
                <li>
                  {" "}
                  <Link path="/panele/valdymas">Vartotoju valdymas</Link>
                </li>
                <li>
                  {" "}
                  <Link path="/panele/valdymas">Logs</Link>
                </li>
                <li>
                  {" "}
                  <Link path="/panele/valdymas">Mano profilis</Link>
                </li>
              </ul>
            </nav>
          </Navigation>

          <EditorWindow>
            <EditorHeader>
              <h1>{header}</h1>
            </EditorHeader>
            <Editor id="style-1">
              <Switch>
                <Route path={`${path}/skelbimas`}>
                  <JobPost />
                </Route>
                <Route
                  path={`${path}/skelbimuvaldymas`}
                  component={ControlJobPost}
                />
              </Switch>
            </Editor>
          </EditorWindow>
        </DashboardWrapper>
      )}
    </>
  );
};

const Dashboard=props=>{
const[data，setData]=useState（）；
让历史=使用历史（）；
让{path，url}=useRouteMatch（）；
useffect（（）=>{
让data=JSON.parse（sessionStorage.getItem（“用户”）；
setData（（）=>{
数据
});
}, []);
let header=新URL（window.location.href）.searchParams.get（“header”）；
返回(
{data==null(
{history.push（“/prisijungimas”）}
) : (
瓦尔迪莫小组会议


苏库尔特·达博·帕西·莱姆·瓦尔迪马斯


{" "}
普兰斯伊迈


{" "}
帕加尔博斯中心酒店


{" "}
瓦尔托托朱瓦尔德马斯酒店


{" "}
日志


{" "}
马诺·普瑞菲利斯酒店


{header}
)}
);
};

我这样解决了这个问题：

它也与功能组件一起工作-我是这样处理的：

首先，确保使用if语句检查是否加载了值，如果不是渲染空块，则使用所有数据渲染实际组件

 {!posts ? (
        <></>
      ) : ( COMPONENT) }

---

控制台中有错误吗？还有什么特定的url给了你这个问题？@lomse我对所有的url都有问题，它们都加载了白色页面，我得到的错误与漫游问题无关-错误出现在组件未加载时。你能粘贴组件代码吗？正如@Sohail指出的，如果没有组件的内容，就很难理解您的问题这不是解决问题的方法，我已经尝试过了，也是同一个问题：）代码没有问题。唯一的潜在问题是数据，react执行异步操作，react可能会在数据准备好之前呈现组件。因此，使其有状态应该可以做到。不，它不起作用，我已经尝试过了，我还删除了HTTP请求，得到了相同的结果，白色空白页面，直到页面被重新加载。您可以控制台数据，看看它是否在第一次加载时打印在控制台中吗？我找到了修复方法，我将其作为答案发布，但无论如何，谢谢！）

  const fetchData = async () => {
    const result = await axios("http://localhost:1337/jobposts?confirmed=true");
    setPosts(result.data);
  };
  useEffect(() => {
    fetchData();
  }, []);