React Router / Express - 刷新动态URL参数

Question

当我通过链接导航到 '/Article/1/' 时，我的React路由器能够正常工作，但是当我刷新浏览器时，它就不能再检测到我的文章组件了。

Root.js

import React from 'react';
import { BrowserRouter as Router, Route, Link, browserHistory } from 'react-router-dom';
import Home from '../page/Home/Index';
import Article from '../page/Article/Index';

const Root = () => {
  return (
    <Router history={browserHistory}>
      <div>
        <ul>
          <li><Link to={'/'}>Home</Link></li>
          <li><Link to={'/About'}>About</Link></li>
        </ul>
        <hr />
        <Route exact path={'/'} component={Home} />
        <Route path={'/Article/:id'} component={Article} />
      </div>
    </Router>
  );
};

export default Root;

Server.js

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

app.use('/', express.static(__dirname + '/dist'));

app.listen(9000, function() {
  console.log('listening on 9000.')
});

我在网上看到可能与我的server.js文件中没有通配符有关 - 有人可以指导我正确的方向吗？谢谢！

编辑 - 这是我尝试过的（仍未呈现）：

app.use(express.static(__dirname + '/dist'))

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname + '/dist/index.html'));
});

- daniel aagentah

---

顺便提一下，BrowserRouter将在幕后使用browserHistory，您不需要显式设置它（除非您以某种方式更改了browserHistory）。 - James

可能与URL重写有关。我在非根路由上遇到了这个问题，刷新后返回404错误。不过，这个问题可能已经得到解决，因为这个问题发布的时间已经很久了。 - ionizer

Answer 1

我在网上看到说这可能与我的 server.js 中没有通配符有关。

是的，那就是问题所在。这里的目标是让客户端处理路由，而不是服务器。为了实现这一点，无论服务器得到什么 URL，它都需要返回客户端应用程序。

简单的解决方法是，在服务器路由上将“/”改为“/*”。

- James

---

所以我已经修改为'app.use('/*', express.static(__dirname + '/dist'));'，但仍然没有运气。 - daniel aagentah

@danjones_mcr 抱歉，我误读了你的代码示例，我看到你使用的是 use 而不是 get。那么，请澄清一下，你的 HTML 是从服务器渲染出来的吗？这是客户端的问题吗？ - James

它正在从服务器上提供 - 我认为这可能是服务器问题，我应该使用“get”吗？ - daniel aagentah

@danjones_mcr，这样会更简单，你可以使用 app.use(express.static(...)) 来设置静态文件夹，然后使用 app.get('/*', ...) 来从任何 URL 提供 HTML。 - James

啊，我明白了。嗯，还是没有解决问题。请看我在Q的编辑。 - daniel aagentah