react-router-dom 在直接访问 URL 时构建给出 404，但不在开发中

Question

我有一个使用 create-react-app 创建的 react 应用，并且正在使用 react-router-dom 进行路由。

总体布局是：

App.js

<BrowserRouter>
    <BodyContent />
</BrowserRouter>

正文内容.js

        <Fragment>
            <Navigation/>
            <main>
                <ScrollToTopRoute path="/" exact component={HomePage}/>
                <ScrollToTopRoute path="/page1" exact component={Page1}/>
                    <ScrollToTopRoute path="/page1/page2" exact component={Page2}/>
                <ScrollToTopRoute path="/page3" exact component={Page3}/>
               ... etc...


            </main>
        </Fragment>

ScrollToTopRoute 只是标准路由器功能的扩展，可确保新页面滚动回顶部以获得良好的用户体验。

ScrollToTop.js

import React, { Component } from 'react';
import { Route, withRouter } from 'react-router-dom';
import ReactGA from 'react-ga';
ReactGA.initialize('UA-5477132-2');



class ScrollToTopRoute extends Component {
    componentDidUpdate(prevProps) {
        if (this.props.path === this.props.location.pathname && this.props.location.pathname !== prevProps.location.pathname) {
            window.scrollTo(0, 0);
            ReactGA.pageview(window.location.pathname + window.location.search);
            console.log("Triggered");
        }
    }

    render() {
        const { component: Component, ...rest } = this.props;

        return <Route {...rest} render={props => (<Component {...props} />)} />;
    }
}

export default withRouter(ScrollToTopRoute);

在开发过程中，应用程序按预期工作，所有路由都正常工作，如果您直接访问localhost:3000/page1 之类的 URL，它将正确加载。我已经使用 yarn build 构建了站点并部署到了典型的 VPS。网站和组件/路由的内部链接都按预期工作，但是当直接访问上面的 URL（例如 www.theurl.com/page1）时，它将 404，我不知道为什么结果不同。

Answer 1

我也面临同样的问题。通过添加具有以下内容的 htaccess 文件来修复它：

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

在How to fix "404" error when directly accessing a component in react找到解决方案

Answer 2

我相信造成这种情况的根本原因实际上是由于您的服务器的配置方式。

React Router 只能在您的前端脚本（从索引页面）加载后处理路由，这当用户在生产中点击/foo deeplink 路由时，情况并非如此。

您必须将您的服务器设置为在每个路由请求除了对于需要由服务器处理的api路由返回索引页面。

这应该将您的服务器设置为让 React Router 处理深度链接请求。

如果您使用的是 Node 和 Express，它应该看起来像这样：

app.get('*', function (req, res) {
  res.send('public/index.html')
})

如果我可以进一步解释，请告诉我。