Question

在花费时间使用approx_count_distinct()和withRouter方法之后，我仍然无法弄清楚为什么我的视图没有随URL的变化而更新。

当我从“ /” 导航到“ /关于” 时，页面不会更新，尽管在重新加载时效果很好。

在React DevTools中，我发现connect甚至在重定向后也没有改变。所以我的猜测是我在某个地方搞砸了Redux的实现。

App.js

props.location

Main.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;

index.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;

尽管我在Redux状态下获得了以下差异（如下所示），但是在React State中却没有体现出来。

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,
);

我相信我在将{ "type": "@@router/LOCATION_CHANGE", "payload": { "pathname": "/about", "search": "," hash ":", "key": "wk0oya" } }与redux链接起来时有些混乱。曾尝试过withRouter解决方案积分：https://stackoverflow.com/a/45036930/2302156。

我还尝试将选项从react-router as per following API Guide传递到connect方法：

[pure]（布尔值）：如果为true，connect（）将避免重新渲染和调用如果相关，则映射到mapStateToProps，mapDispatchToProps和mergeProps state / prop对象根据各自的相等性保持相等检查。假定包装的组件是“纯”组件，并且除了道具和道具外，不依赖其他任何输入或状态选择Redux商店的状态。默认值：true

我的软件包依赖项列表：

react-redux

有人可以帮助我解决此问题吗？

Answer 1

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

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 中的更改

{{1}}

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

2 个答案: