DEV Community

Discussion on: React routing in production

Collapse
 
bradstondev profile image
Bradston Henry

Hi Mackelele. So I totally have run into this issue before.

So without seeing you project structure or your code, I'll try and give guidance.

The big thing to note is that using React (from my experience and research on this topic), navigation is not exactly similar to standard web routing we are probably used to.

Browser Navigation from page to page has to be initiated from within the application itself once built and hosted on a server.

This stackoverflow answer does a GREAT job of explaining what's happening and the issues with React Navigation (and solutions):

stackoverflow.com/questions/279283...

I'll share some of my code so you can kind of see how I manage navigation. Hopefully it's helpful. I manually use the command this.props.history.push() to manage navigation.

If you go to my src -> pages folder, you will see a file called "JellyBeanHome.js". In the file, there is a function called*startGame()* and that's where you'll see an instance of navigation. My App.JS file looks very similar to yours so hopefully It'll all make sense.

My React code: github.com/bradstondevcode/jelly-b...

Collapse
 
mackr2015 profile image
mackelele

Thanks for your reply.
Sorry for my late reply here.

I got it sorted for the project that I was working on. Project can be seen at react.megamixbend.com/ . Since then I didn't have projects with React but I am planning to re-do my personal portfolio site.

With the above project I did learned a lot about React. I did played with the Routing and different versions. I think the best way to go about this is to use node route path and then hook it up with React.

The learning continues......

Collapse
 
mackr2015 profile image
mackelele

This video is a good example of what I was trying to achieve.
It's sad to see that a lot of setting up needed to be done for a routing different pages in React.

React Router
youtu.be/aZGzwEjZrXc