Question

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

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

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

Answer 2

我这样解决了这个问题：

它也与功能组件一起工作-我是通过这种方式实现的：

首先，请确保执行if语句以检查是否已加载值，否则将渲染空块，否则将使用所有数据渲染实际组件。

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

解决问题的秘诀是-在调用异步的uedEffect方法中函数，而不是自己执行方法内部的所有逻辑。

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

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

2 个答案: