Question

我目前正在使用react 15.6.1，react-router和react-router-dom 4.1.1和react-redux 5.0.4。

我将主App组件渲染如下：

ReactDOM.render(<BrowserRouter>
    <Provider store={store}>
        <App />
    </Provider>
</BrowserRouter>, document.getElementById('react-view'));

App组件看起来像这样（显然为了简洁而减少）：

const App = (props) => {
    return <div>
        ...

        { props.loggedInUser ?
        <nav>
            <Link to="/user/profile">Profile</Link>
            <Link to="/user/register">Log Out</Link>
        </nav> :
        <nav>
            <Link to="/user/login">Login</Link>
            <Link to="/user/register">Register</Link>
        </nav> }

        ...

        <Switch>
            <Route path="/user/register" component={Register} />
            <Route path="/user/login" component={Login} />
            <Route component={NotFound} />
        </Switch>
    </div>;
};

function mapStateToProps(state) {
    return {
        loggedInUser: state.users.loggedInUser
    };
}

export default connect(mapStateToProps)(withRouter(App));

路由工作绝对正常。我可以转到/user/register和/user/login，它会加载这些组件（以及其他任何内容的NotFound组件）。

但是，点击Link标记无效。甚至没有任何控制台错误。它只是坐在同一页面上。对于这些组件中的任何Link标记，它都是相同的。中键单击有效，因为它只使用正常的<a>行为，但在新标签中。

我已经尝试了本文中的所有内容 - https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md这似乎暗示可能与Redux的工作方式存在冲突，但在尝试之后我仍然看不出任何区别。您可以看到我在withRouter上使用App，我也在所有三个Route组件上使用location，但我也尝试过将console.log作为属性传递给组件，并且什么都不做。

向任何组件添加App或断点，包括/user/register，表明在单击链接时永远不会重新呈现它。 location属性在初始页面加载时具有正确的值，例如在{ pathname: "/user/register", search: "", hash: "", state: undefined, key: undefined }：

上

setInterval(() => {
    console.log(props.location);
}, 1000);

但是，我控制台登录了一个setInterval：

Link

当我点击devServer.historyApiFallback = true时，当它再次在控制台中记录时，它永远不会更改为新位置。

我已经看到了将const path = require('path'); const webpack = require('webpack'); const settings = require('./resources/settings'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const extractSass = new ExtractTextPlugin({ filename: "style.css" }); const plugins = [ extractSass, new webpack.DefinePlugin({ "process.env": { "NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"), "DOMAIN": JSON.stringify(process.env.DOMAIN), "API_PORT": JSON.stringify(process.env.API_PORT), "API_DOMAIN": JSON.stringify(process.env.API_DOMAIN) } }) ]; if (settings.env === 'production') { plugins.push(new webpack.optimize.UglifyJsPlugin({minimize: true})); } module.exports = { entry: [ './client.js' ], output: { path: path.join(__dirname, 'public', 'static'), filename: 'bundle.js' }, module: { rules: [ { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015'] } }, { test: /\.scss$/, loader: extractSass.extract({ loader: [{ loader: "css-loader", options: { sourceMap: settings.env !== 'production' } }, { loader: "sass-loader", options: { sourceMap: settings.env !== 'production' } }] }) } ] }, // These libraries are included in separate script tags and are available as global variables externals: { "react": "React", "react-dom": "ReactDOM", "window": "window" }, plugins, devtool: settings.env === 'production' ? null : 'source-map', node: { fs: "empty" } };放在webpack.config.js中的引用，但我没有使用开发服务器，尽管我使用的是webpack。我非常确定，因为我没有使用开发服务器而只是直接从快速运行它，所以历史记录功能应该是浏览器的默认设置。虽然我尝试了这个设置并没有区别。这是我的配置文件：

exact

我知道还有另一个问题在这里提出完全相同的问题，但在那个问题中，问题似乎是因为没有使用QGraphicsView而导致的根路由冲突。这与我遇到的问题不同。

Answer 1

我修好了。为了其他任何有这个问题的人的利益，我只需要交换为App调用包装函数的顺序：

export default withRouter(connect(mapStateToProps)(App));

我也可以从任何其他组件中移除withRouter，即使其中包含Link。

使用react-redux 5单击react-router-dom 4中的<link />标签无效

1 个答案: