Question

我的本地版本的路由运行良好，当我创建生产版本时，我无法访问生产版本中的路由

我已经尝试过遇到的所有解决方案

import { Route, Link, BrowserRouter as Router } from 'react-router-dom';
function render(component) {
    ReactDOM.render(
        <ApolloProvider client={apolloClient}>
        <Router>
            <div>
                <Route exact path="/" component={Login}/>
                <Route path="/constlist" component={ConstituencyList}/>
                <Route path="/addRep" component={AddRep}/>
                <Route exact path="/roundList/:id" component={RoundList}/>
                <Route exact path="/updateVotes/:cid/:rid" component={UpdateVotes}/>
                <Route exact path="/analysis/:id" component={AnalysisPage}/>
                <Route exact path="/replist" component={RepList}/>
                <Route exact path="/admin" component={AdminLogin}/>
                <Route exact path="/addCandidate" component={AddCandidate}/>
                <Route exact path="/homepage" component={HomePage}/>
            </div>
        </Router>
    </ApolloProvider>, document.getElementById('root'));
}

render(<App />);

实际输出：必须已启用路由

Answer 1

此问题并非特定于您的代码。但是，任何在Web服务器上托管的SPA都会发生这种情况。

原因：当您尝试访问xyz.com/page1时，网络服务器会假定您正在尝试获取根目录下“ page1”文件夹中的index.html。这不起作用，因为您的根目录中没有'page1'文件夹。因此，网络服务器会显示404错误。当您直接尝试打开xyz.com/page1时，通常会发生这种情况，但是当您首先打开xyz.com然后导航到xyz.com/page1时，它会很好地工作。这是因为，当您第一次加载xyz.com时，您的React路由器已在浏览器中启动，随后的路由已处理完毕。

解决方案：您需要告诉Web服务器始终默认使用根目录的index.html。因此，当在其中查找index.html时找不到文件夹时，它将采用根目录的index.html。这可以通过更改Web服务器的配置来完成。例如，在nginx中，您可以执行以下操作：

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri /index.html;
}

其他Web服务器可能具有不同的设置/配置以实现相同的目的。

我无法在我的React App的生产版本中访问路线

1 个答案: