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

Question

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

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

的页面外，所有页面都可以正常工作

我对 React 还很陌生，但据我所知，静态 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 消息，提示找不到该网页。我不确定我是否正在用 static/dynamic 想法追逐一个兔子洞，但我花了大约 2 天时间试图弄清楚为什么到目前为止这不起作用，我愿意尝试任何事情。

Answer 1

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

If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory), many static file servers will fail. For example, if you used React Router with a route for /todos/42, the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.

This is because when there is a fresh page load for a /todos/42, the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html. For example, we can amend our Express example above to serve index.html for any unknown paths:

所以，您的解决方案是更改

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

至

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

希望对您有所帮助

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

React routes gives 404 when trying to hit routes with /:id

reactjs

azure-web-app-service

react-router-dom