Question

我正在尝试使用react-router启用客户端路由，但是我只能使路由在“ /”后的某一层按预期表现。（即 localhost：8080 / 有效， localhost：8080 / {id} 有效，但是 localhost：8080 / vote / {id} 无效）

此外，我尝试使用webpack-dev-server在本地进行开发，并使用webpack -p和expressjs服务器部署到heroku。我的快递服务器设置为所有路由都默认为index.html。

app.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, './dist/index.html'));
});

在使用npm start（快速服务器）时，我尝试导航到localhost：8080 / vote / {id}，控制台显示： SyntaxError：期望的表达式，得到了'<'表示我有一个this issue之类的情况。但是，当使用webpack-dev-server时，控制台中出现另一个错误，提示：源为“ http://localhost:8080/vote/bundle.js”的加载失败。我相信我所看到的是相同核心问题的两个不同输出，不同之处是我的环境，或者Express / webpack-dev-server提供内容的方式不同。

这是我完整的expressJS服务器：

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;

app = express();
// the __dirname is the current directory from where the script is running
app.use('/', express.static(path.resolve(__dirname, 'dist')));

// send the user to index html page inspite of the url
app.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, './dist/index.html'));
});

app.listen(port);
console.log("server started on port " + port);

这是我的webpack.config.js的相关部分：

output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: "/"
    },
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        historyApiFallback: true
    }

这是我的App.js及其相关路由（Home，RealtimeView，PollVote是自定义的React组件）：

export default class App extends Component {
    render() {
        return (
            <BrowserRouter history={browserHistory}>
                <div>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/:id" component={RealtimeView} />
                    <Route exact path="/vote/:id" component={PollVote}/>
                </div>
            </BrowserRouter>
        );
    }
}

使用此配置，我可以可靠地使 localhost：8080 / 工作，并且 localhost：8080 / {whatever} 工作，但是 localhost：8080 / vote / {id} 或比localhost：8080 / {something}更复杂的任何路由都会由于我之前提到的错误而失败，具体取决于我使用的是webpack-dev-server还是我的expressjs服务器。

FWIW我对webdev相对较新（到目前为止，我的经验是它是一个cluster-fck），我不能使用完全同构的应用程序，因为我的后端位于java / spring中，而我不是重新编写我的整个后端。我找到了this post to be helpful，但不能解决我的问题。请帮助这让我发疯。

Answer 1

尝试明确设置后备文件：

historyApiFallback:{
  index: 'index.html'
}

使用react-router和expressJS的客户端路由只能深入一层

1 个答案: