Привязка к сгенерированным маршрутам из других сгенерированных маршрутов в React

#javascript #reactjs

Вопрос:

У меня есть приложение, которое создает солнечные системы и создает маршрут к ним со следующим кодом

  <Route
          exact
          path="/:id"
          render={(props) => <GenerateSystem {...props} />}
        />

 

Это работает нормально, и мой GenerateSystem компонент создает несколько планет, которые сами должны иметь маршруты на свои собственные страницы.

Мой компонент GenerateSystem

 <MiniPlanet
          name={`planets/${makeid()}`}
          label={``}
          className={`${planetTypes[Math.floor(Math.random() * 56   1)]} 
          }`}
        >
          {" "}
          
        </MiniPlanet>

 

И в моем app.js Я пытаюсь использовать маршрут так

 <Route exact path ="/planet/:id" component={GeneratePlanet} />
 

Однако до сих пор, например , когда я нажимаю на один из этих маршрутов http://localhost:3000/planets/p0c70v , вместо того, чтобы перейти к моему GeneratePlanet компоненту, он возвращает меня на домашнюю страницу. На данный момент мой GeneratePlanet компонент содержит только одну строку текста, поэтому я знаю, что проблема не в этом.

Что я делаю не так с маршрутизацией? Мой полный код можно просмотреть здесь.

Комментарии:

1. Совет профессионала: при добавлении inline formatting , пожалуйста, используйте только одну обратную сторону. Тройки необходимы только при создании форматирования блоков.

Ответ №1:

Я выяснил причину

 useEffect(() => {
    EnterSystem();
    MakeTheSystem();

    return () => {
      ExitSystem();
    };
  }, []);
 

Удалите эту часть кода

 return () => {
      ExitSystem();
    };

 

Чтобы запустить анимацию выхода. Он перенаправляет на страницу»/».