Маршрутизатор React.js, переходящий на другую страницу, отображает пустую страницу

Прежде всего, я использую компоненты без состояния (функциональные). Проблема, с которой я столкнулся, заключается в следующем: при переходе на другой маршрут через компонент 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>

);

Если честно, я здесь в отчаянии. Когда у меня нет точного атрибута на загружаемых страницах компонентов маршрута - но они накладываются друг на друга - это не подходит для меня.

РЕДАКТИРОВАТЬ: компонент Dashboard:

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

person Jonas Tamoševičius    schedule 12.01.2020    source источник
comment
В консоли есть ошибка?   -  person lomse    schedule 12.01.2020
comment
Также какой конкретный URL вызывает у вас эту проблему?   -  person lomse    schedule 12.01.2020
comment
@lomse У меня проблема со всеми URL-адресами, все они загружают белую страницу, и ошибки, которые я получаю, не связаны с проблемой перемещения - ошибка появляется, когда компонент не загружается.   -  person Jonas Tamoševičius    schedule 12.01.2020
comment
Не могли бы вы также вставить код вашего компонента.   -  person Sohail Ashraf    schedule 12.01.2020
comment
Как отметил @Sohail, без содержимого компонента будет сложно понять вашу проблему   -  person lomse    schedule 12.01.2020
comment
@Sohail Я добавил код компонента дашборда.   -  person Jonas Tamoševičius    schedule 12.01.2020


Ответы (2)


Я исправил проблему следующим образом:

Он работает и с функциональной составляющей - я подошел к этому так:

Прежде всего, обязательно сделайте оператор if, чтобы проверить, загружены ли значения, если это не тот рендеринг пустого блока, иначе рендерит фактический компонент со всеми данными.

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

Вторая вещь, которая устранила проблему, заключалась в том, что метод uedEffect вызывает асинхронную функцию, а не выполняет всю логику внутри самого метода.

  const fetchData = async () => {
    const result = await axios("http://localhost:1337/jobposts?confirmed=true");
    setPosts(result.data);
  };
  useEffect(() => {
    fetchData();
  }, []);
person Jonas Tamoševičius    schedule 12.01.2020

Сделайте компонент отслеживающим состояние и обрабатывайте данные через состояние.

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

person Sohail Ashraf    schedule 12.01.2020
comment
Это не выход, я уже пробовал, та же проблема :) - person Jonas Tamoševičius; 12.01.2020
comment
С кодом все в порядке. Единственная потенциальная проблема связана с данными, response выполняет действие асинхронно, возможно, что react будет отображать компонент до того, как данные будут готовы. Так что создание состояния должно помочь. - person Sohail Ashraf; 12.01.2020
comment
Нет, это не работает, я уже пробовал, я также удалил HTTP-запрос и получил тот же результат, белую пустую страницу, пока страница не перезагружается - person Jonas Tamoševičius; 12.01.2020
comment
Не могли бы вы объединить данные и посмотреть, будут ли они напечатаны в консоли при первой загрузке? - person Sohail Ashraf; 12.01.2020
comment
Я нашел исправление, которое опубликовал в качестве ответа, но в любом случае спасибо! :) - person Jonas Tamoševičius; 12.01.2020