React部署Netlify后路由异常：新标签页/刷新组件失效

Hey there! I totally get the frustration—dealing with routing issues when deploying React apps to static hosts like Netlify is super common, especially when you're starting out. Let me break down why this happens and how to fix it properly so you can ditch that ugly # in your URL.

Why this happens #

The core issue is how static servers handle requests. When you use BrowserRouter, your app uses "clean" URLs like /about. But when you refresh that page or open it directly in a new tab, Netlify tries to find an actual file at /about (like about.html), which doesn't exist—your entire React app is served from index.html.

Local development works because tools like webpack-dev-server automatically redirect all requests to index.html so React Router can take over routing. Netlify doesn't do this by default, hence the 404 errors.

The fix: Configure Netlify redirects #

You just need to tell Netlify to send all requests to index.html, letting React Router handle the rest. Here are two simple ways to set this up:

Option 1: Use a netlify.toml file

Create a file named netlify.toml in your project's root directory (same level as package.json) with this content:

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

Option 2: Use a _redirects file

If you prefer, create a file named _redirects (no file extension) inside your project's public folder, then add this line:

/*    /index.html   200

Switch back to BrowserRouter #

Once you've set up the redirect rule, revert your index.js back to using BrowserRouter to get clean URLs:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import App from './component/js/App';
import About from './component/js/About'
import './index.css'

ReactDOM.render((
  <Router>
    <Route path='/' component={App} exact strict />
    <Route path='/about' component={About} exact strict />
  </Router>
), document.getElementById('root'))

What happens next #

When you deploy your updated app to Netlify, any request (like /about) will be redirected to index.html, and React Router will handle rendering the correct component. No more 404s on refresh or new tabs, and your URLs stay clean without the #!

Just make sure these configuration files are included in your deployment—Netlify will automatically pick up netlify.toml from the root, or the _redirects file from the public folder after your build process copies it to the output directory.

内容的提问来源于stack exchange，提问作者trem98