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

Posted 2023-02-21

【中文标题】React Router / Express - 刷新动态 URL 参数

【英文标题】：React Router / Express - Refreshing dynamic URL parameters

【发布时间】：2018-03-02 21:34:54

【问题描述】：

通过链接导航到“/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'));
);

【问题讨论】：

FWIW BrowserRouter 将在幕后使用 browserHistory，您无需显式设置它（除非您以某种方式更改 browserHistory）。

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

【参考方案1】：

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

是的，就是这样。这里的目标是让您的客户端而不是服务器来处理路由，为此您需要服务器返回客户端应用程序，而不管它获取什么 URL。

简单修复 - 在您的服务器路由上将 / 更改为 /*。

【讨论】：

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

@danjones_mcr 道歉我误读了您的代码示例，我看到您使用的是 use 而不是 get。所以澄清一下，您的 HTML 是否从服务器呈现？这是客户端问题吗？

它是从服务器提供的，是的 - 我相信这可能是服务器问题，我应该使用“get”吗？

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

啊啊啊我明白了，嗯还是没有成功，请看我在 Q 上的编辑