Advanced Routing in Netlify React [duplicate]

Question

I had problems with the routing after deploying my react app on netlify. I inserted a _redirects file to my public folder with this code /* /index.html 200 as recommended.

Yet, when I refresh the page from an advanced route e.g. '/sceneries/beach', it always pushes me back to the index page. Locally it has been working perfectly before. Do you know how to solve this? My routes currently look like this:

in index.js

ReactDOM.render((
<Router history={history}>
    <App />
</Router>
), document.getElementById('root'));

in App.js

<BrowserRouter>
          <Route path='/' component ={Home} />
          <Route path='/sceneries/:id' component ={Comparison} />
          <Redirect from="*" to="/" />
      </BrowserRouter>

Thanks a lot in advance! I really appreciate some help!

Enora · Accepted Answer · 2020-06-08 17:39:56Z

2

I had the same problem as you when I created a React app and deployed it on Netlify. This is what worked for me, based on this solution:

Create a file named netlify.toml in the root/main folder of your project.
Inside of this file, add this code:

[[redirects]] from = "/*" to = "/index.html" status = 200

Save and deploy your website with git add commit push.
Wait for your site to re-deploy on Netlify.
Test your website with refresh.

Let me know if you have any additional questions, I'm happy to help :)

answered Jun 8, 2020 at 17:39

Enora

1669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Advanced Routing in Netlify React [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related