尝试使用 /:id 访问路由时，React 路由会给出 404

Question

我继承了一个静态网站的框架，该框架使用 react 和 react-router-dom 作为路由。我们希望网站能够支持通过 id 将内容动态加载到页面上。

例如，我有一个列出所有文章的 /articles 页面，当您单击列出的文章之一时，它会打开 URL /articles/ABCDEFG，然后加载文章页面组件并获取该特定文章的数据ID。这完全适用于本地开发人员，但是一旦我部署到生产环境（托管为 Azure 网站应用程序），除了具有动态 URL 的页面之外，所有页面都可以正常工作。

我对 react 还很陌生，但是根据我的阅读，静态反应站点不能使用 /:id，因为它要求每个页面都已经存在。

我进行了搜索并尝试从服务器和 webconfig 中删除任何与静态相关的内容。

var express = require('express');
var serveStatic = require('serve-static');
var fallback = require('express-history-api-fallback');

var app = express();
var publicDir = path.resolve(__dirname, '../www');

// app.use('/', serveStatic(publicDir));
//app.use(fallback('index.html', { root: publicDir }));

app.listen(process.env.PORT);

我的路线是这样设置的

    generateRoutes() {
        return (
            <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/about" component={About} />
                <Route exact path="/articles" component={Articles} />
                <Route path="/articles/:id" component={Article} />
                <Route exact path="/careers" component={Careers} />
                <Route exact path="/people" component={People} />
                <Route path="/profile/:id" component={Profile} />
            </Switch>
        );
    }

我想要的是，当我将一个 url 放入地址栏中时，例如 https://example.com/site/profile/246b9e73-5332-4afb-92b8-be5a061bd908，它会呈现带有该 ID 的个人资料页面。

相反，我收到一个 404 表示找不到该页面。我不确定我是否正在用静态/动态的想法追逐一个兔子洞，但我花了大约 2 天时间试图弄清楚为什么到目前为止这不起作用，我愿意尝试任何事情。

Answer 1

create-react-app 中的 deployment 部分已经解决了这个问题，声明

如果您使用在底层使用 HTML5 pushState history API 的路由器（例如，带有 browserHistory 的 React Router），许多静态文件服务器将失败。例如，如果您将 React Router 与 /todos/42 的路由一起使用，则开发服务器将正确响应 localhost:3000/todos/42，但为上述生产构建提供服务的 Express 则不会。

这是因为当 /todos/42 有新的页面加载时， 服务器查找文件 build/todos/42 并没有找到它。这 服务器需要配置为响应对 /todos/42 的请求 服务 index.html。例如，我们可以修改我们的 Express 示例 上面为任何未知路径提供 index.html：

所以，你的解决方案是改变

app.use('/', serveStatic(publicDir));

到

app.use('/*', serveStatic(publicDir));

希望对你有帮助