Question

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

一般布局是：

App.js

<BrowserRouter>
    <BodyContent />
</BrowserRouter>

Bodycontent.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，它将正确加载。我已经使用纱线构建来构建站点，并部署到典型的VPS。该网站和指向组件/路由的内部链接都可以按预期工作，但是当直接访问上述www.theurl.com/page1这样的URL时，它将显示404，而我对结果为何不同感到困惑。

Answer 1

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

React Router仅在加载前端脚本（从索引）后才能处理路由页），而用户在生产环境中点击/foo深层链接时就不会这样。

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

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

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

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

让我知道是否可以进一步解释。

Answer 2

我也遇到了同样的问题。通过添加具有以下内容的 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

当直接访问URL但不在开发中时，react-router-dom Build Giving 404

2 个答案: