#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();
};
Чтобы запустить анимацию выхода. Он перенаправляет на страницу»/».