Ничего не было возвращено из рендера; пытаясь перенаправить на главную страницу - PullRequest
Новая
       18

Ничего не было возвращено из рендера; пытаясь перенаправить на главную страницу

0 голосов
/ 18 марта 2020

Я работаю над школьным проектом с реакции, и у меня возникают трудности с перенаправлением на страницу. Я использую React-Router-DOM для навигации. В моем коде я пытаюсь перенаправить на домашнюю страницу с помощью history.push("/"), если тестовый массив не содержит ничего. Если я изменю условие отображения else на случайный тег p, он будет отображать этот текст, но я просто хочу, чтобы он перенаправлялся в операторе else.

edit: ошибка возникает при обновлении страницы, URL-адрес выталкивается. Поэтому, если я снова перефразирую sh, я на главной странице. 

import React from "react";
import styles from "./Profile.module.css";
import { useParams } from "react-router-dom";
import { useStores } from "../../hooks/useStores";
import Trade from "../Trade/Trade";
import { useHistory } from "react-router-dom";

const Profile = () => {
  const history = useHistory();
  const stores = useStores();

  let { id } = useParams();
  const test = stores.dataStore.openTrades.filter(
    trade => trade.user.id.toString() === id
  );

  if (test.length > 0) {
    return (
      <>
        <div className={styles.profileHead}>
          <img
            src={process.env.PUBLIC_URL + "/assets/img/poke-logo.svg"}
            alt="profile icon"
            width="120"
            height="120"
          />
          <p
            className={styles.profileName}
          >{`Profile of ${test[0].user.name}`}</p>
        </div>
        <div className={styles.trades}>
          <h2 className={styles.profileTrades}>
            {`${test[0].user.name}'s trades`}{" "}
            <span className={styles.tradesLength}>({test.length})</span>
          </h2>
          <div className={styles.tradesColumn}>
            {test.map((trade, index) => (
              <Trade key={index} trade={trade} index={index}></Trade>
            ))}
          </div>
        </div>
      </>
    );
  } else {
    return(
    history.push('/')
    );
  }
};

1 Ответ

3 голосов
/ 18 марта 2020

Если вы хотите изменить URL в функции , используйте history.push. Когда он основан на чем-то, что вы визуализируете , вы должны использовать Redirect.

В этом случае вы должны использовать Redirect, как показано ниже: 

} else {
  return(
    <Redirect to="/" />
  );
}

Если вы меняете страницу, скажем, по нажатию кнопки, то history.push будет уместным. 

<button onClick={() => history.push('/')}>Go to Home</button>
...