React router No Match 404 在部署时不工作？

Question

我在我的网站上添加了一个 No Match 404 错误页面，当我在本地主机上转到错误的路径时它工作正常，但在我部署并转到无效路径后，如 .../invalidpath 我得到了默认 netlify 页面未找到错误。下面是我的 App.js 组件：

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Navigation from './components/navigation/Navigation';
import Home from './pages/home/Home';
import Projects from './pages/projects/Projects';
import Contact from './pages/contact/Contact';
import NoMatch from './pages/404page/404Page';

import './App.scss';

function App() {
  return (
    <div className='app'>
      <Navigation />
      <Switch>
        <Route exact path='/' component={Home} />
        <Route path='/projects' component={Projects} />
        <Route path='/contact' component={Contact} />
        <Route path='*' component={NoMatch} />
      </Switch>
    </div>
  );
}

export default App;

Answer 1

如果您使用 create-react-app 构建了应用程序并且要部署到 Netlify，则需要在项目的 public 目录中添加一个 _redirects 文件，以便按顺序支持客户端路由（React Router）。里面应该有这个：

/*  /index.html  200

详情here。另外，查看来自 Netlify 的关于 Redirects and rewrites

的官方文档

React router No Match 404 在部署时不工作？

React router No Match 404 not working when deployed?

reactjs

react-router

netlify