Linking to generated routes from other generated routes in React

user_13569082 0
Viewed 34

I have an app that creates solar systems and creates a route to them with the following code

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

This is working fine, and my GenerateSystem component creates several planets that themselves should have routes to their own pages.

My GenerateSystem component

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

And in my app.js I am trying to use the route like so

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

So far however, when I click on one of these routes for instance http://localhost:3000/planets/p0c70v, instead of bringing me to my GeneratePlanet component it will return me to the homepage. At the moment my GeneratePlanet component just contains a single line of text so I know the issue is not there.

What am I doing wrong with the routing? My full code is viewable here.

reactjs javascript
1 Answers

I found out the reason

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

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

Remove this part of the code

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

To trigger an exit animation. It redirects to the "/" page.

user_135690820
Related