Netlify React 中的高级路由

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 eg '/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!

Answer 1

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 :

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

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

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

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