Question

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

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

我是个很新的响应者，但是从我读过的文章来看，静态响应站点不能使用/：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历史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));

希望这会有所帮助

尝试使用/：id击中路线时，React路线给出404

1 个答案: