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

Question

首先，我使用的是无状态组件（功能性）我遇到的问题是：当通过 Link 组件转到另一条路线时，我得到了空白页面，并且在刷新页面后加载了组件。 我的所有路线都在 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>
      )}
    </>
  );
};

Answer 1

我这样解决了这个问题：

它也适用于功能组件 - 我是这样处理的：

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

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

解决这个问题的第二件事是 - 在 uedEffect 方法中调用异步函数，而不是在它自己的方法中执行所有逻辑。

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

Answer 2

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

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>
      )}
    </>
  );
};