ReactJS：即使在 URL 更改后组件也未加载

Question

在使用 withRouter 和 connect 方法之后，我仍然无法弄清楚为什么我的视图没有随着 URL 中的更改而更新。

当我从 "/" 导航到 "/about" 时，页面没有更新，但在重新加载时工作正常。

从 React DevTools 中，我可以看到我的 props.location 即使在重定向后也没有改变。所以我的猜测是我在某处搞砸了 Redux 的实现。

App.js

import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";

import Main from "./Main";

const actionCreators = {};

function mapStateToProps(state) {
    return state;
}

function mapDispatchToProps(dispatch) {
    const actions = bindActionCreators(actionCreators);

    return { ...actions, dispatch };
}

const App = withRouter(connect(mapStateToProps, mapDispatchToProps)(Main));

export default App;

Main.js

import React from "react";

import Navbar from "./components/navbar/navbar.component";
import Footer from "./components/footer/footer.component";

const Main = props => (
    <div>
        <Navbar currentState="Home" />
        {React.cloneElement(props.children, props)}
        <Footer />
    </div>
);

export default Main;

index.js

import React from "react";

import { Provider } from "react-redux";
import { render } from "react-dom";
import { Router, Route, Switch } from "react-router";
import { withRouter } from "react-router-dom";

import store, { history } from "./store";

import App from "./App";
import Home from "./containers/home/home.component";
import AboutPage from "./containers/aboutPage/aboutPage.component";

const MOUNT_POINT = document.getElementById("root");

const router = (
    <Provider store={store}>
        <Router history={history}>
            <App>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/about" component={AboutPage} />
                </Switch>
            </App>
        </Router>
    </Provider>
);

render(
    router,
    MOUNT_POINT,
);

虽然我在 Redux 状态下得到以下差异（如下所示），但在 React 状态中没有反映出来。

{
    "type": "@@router/LOCATION_CHANGE",
    "payload": {
        "pathname": "/about",
        "search": ","
        hash ":",
        "key": "wk0oya"
    }
}

我想我在连接 redux 和 react-router 时搞砸了。尝试过 withRouter 解决方案学分：.

我还尝试将选项从 react-redux as per following API Guide:

传递给 connect 方法

[pure] (Boolean): If true, connect() will avoid re-renders and calls to mapStateToProps, mapDispatchToProps, and mergeProps if the relevant state/props objects remain equal based on their respective equality checks. Assumes that the wrapped component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state. Default value: true

我的包依赖列表：

"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"

谁能帮我解决这个问题？

Answer 1

我认为在 Main.js 中你应该使用 {this.props.children} 而不是 {React.cloneElement(props.children, props)}。 React.cloneElement 如果您的 child 是单个 React 元素并且您的 Main.js 看起来更像是页面内容的布局（包装器），则 React.cloneElement 可以正常工作。

import React from "react";

import Navbar from "./components/navbar/navbar.component";
import Footer from "./components/footer/footer.component";

const Main = ({ children }) => (
    <div>
        <Navbar currentState="Home" />
        {children}
        <Footer />
    </div>
);

export default Main;

Answer 2

由于包含了错误的依赖项，因此无法正常工作。

index.js、

的变化

import React from "react";

import { Provider } from "react-redux";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import store from "./store";

import App from "./App";
import Home from "./containers/home/home.component";
import AboutPage from "./containers/aboutPage/aboutPage.component";

const MOUNT_POINT = document.getElementById("root");

const router = (
    <Provider store={store}>
        <Router>
            <App>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/about" component={AboutPage} />
                </Switch>
            </App>
        </Router>
    </Provider>
);

render(
    router,
    MOUNT_POINT,
);

ReactJS：即使在 URL 更改后组件也未加载

ReactJS: Component not loaded even after URL changes

reactjs

redux

react-redux

react-router-redux

react-router-v4