我正在使用Webpack，也遇到了同样的问题。

解决方案:

在你的server.js文件中:

const express = require('express');
const app = express();

app.use(express.static(path.resolve(__dirname, '../dist')));
  app.get('*', function (req, res) {
    res.sendFile(path.resolve(__dirname, '../dist/index.html'));
    // res.end();
  });

为什么我的应用程序刷新后不呈现?

我还没有使用服务器端渲染，但我遇到了与OP相同的问题，其中Link在大多数时候似乎工作正常，但当我有一个参数时就失败了。我将在这里记录我的解决方案，看看它是否对任何人都有帮助。

我的主要JSX内容包括:

<Route onEnter={requireLogin} path="detail/:id" component={ModelDetail} />

这对于第一个匹配的链接很有效，但是当嵌套在该模型的详细页面上的< link >表达式中的:id发生变化时，浏览器栏中的URL会发生变化，但页面的内容最初并没有改变以反映链接的模型。

问题是我已经使用props.params.id在componentDidMount中设置了模型。组件只挂载一次，因此这意味着第一个模型是粘贴在页面上的模型，随后的链接更改了道具，但保持页面看起来不变。

在componentDidMount和componentWillReceiveProps的组件状态中设置模型(其中它基于下一个道具)可以解决问题，并且页面内容更改以反映所需的模型。

这可以解决你的问题。

在生产模式下的React应用程序中，我也遇到了同样的问题。这里有两个解决这个问题的方法。

解决方案1。将路由历史更改为“hashHistory”，而不是browserHistory

<Router history={hashHistory} >
   <Route path="/home" component={Home} />
   <Route path="/aboutus" component={AboutUs} />
</Router>

现在使用命令构建应用程序

sudo npm run build

然后将构建文件夹放在var/www/文件夹中。现在，在每个URL中添加#标签，应用程序就可以正常工作了。就像

localhost/#/home
localhost/#/aboutus

解决方案2:没有#标签使用browserHistory，

在路由器中设置你的history = {browserHistory}。现在使用sudo npm run build构建它。

您需要创建“conf”文件来解决404 not found页面。conf文件应该是这样的。

打开终端，输入以下命令

cd /etc/apache2/sites-available
ls
nano sample.conf

在其中添加以下内容

<VirtualHost *:80>
    ServerAdmin admin@0.0.0.0
    ServerName 0.0.0.0
    ServerAlias 0.0.0.0
    DocumentRoot /var/www/html/

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    <Directory "/var/www/html/">
            Options Indexes FollowSymLinks
            AllowOverride all
            Require all granted
    </Directory>
</VirtualHost>

现在您需要使用以下命令启用sample.conf文件:

cd /etc/apache2/sites-available
sudo a2ensite sample.conf

然后，它将要求您重新加载Apache服务器，使用

sudo service apache2 reload or restart

然后打开您的localhost/build文件夹，并添加包含以下内容的.htaccess文件。

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]

现在应用程序运行正常。

注意:0.0.0.0 IP地址修改为本地IP地址。

使用useEffect读取URL并应用您想要的更改。

例如，一个页面有一个按钮，打开一个滑块。单击按钮时，将向URL中添加滑块的查询参数，并打开滑块。

问题-在刷新页面时打开滑块，加载的页面不显示打开的滑块，即使查询参数存在。

解决方案:添加一个useEffect，读取“slider”查询参数，并运行按钮处理程序。为滑块查询参数添加一个状态变量，并将其包含在useEffect的依赖数组中。

你不需要担心后端请求，假设在滑块组件中有一个。

Webpack开发服务器有一个选项可以启用此功能。打开包。Json和添加——history-api-fallback。 这个解决方案对我很有效。

react-router-tutorial

对于使用iis10的用户，您应该这样做来纠正错误。

确保你使用了browserHistory。作为参考，我会给出路由的代码，但这不是最重要的。重要的是下面组件代码之后的下一步:

class App extends Component {
    render() {
        return (
            <Router history={browserHistory}>
                <div>
                    <Root>
                        <Switch>
                            <Route exact path={"/"} component={Home} />
                            <Route path={"/home"} component={Home} />
                            <Route path={"/createnewproject"} component={CreateNewProject} />
                            <Route path={"/projects"} component={Projects} />
                            <Route path="*" component={NotFoundRoute} />
                        </Switch>
                    </Root>
                </div>
            </Router>
        )
    }
}
render (<App />, window.document.getElementById("app"));

由于问题是IIS从客户端浏览器接收请求，它将把URL解释为请求一个页面，然后返回一个404页面，因为没有任何可用的页面。做以下几点:

打开IIS 展开“服务器”，然后打开“站点文件夹” 点击网站/应用程序 进入错误页面 在列表中打开404错误状态项 将“将静态文件中的内容插入到错误响应中”选项改为“在此站点上执行URL”，并在URL中添加“/”斜杠值。

现在可以正常工作了。