ReactJS: компонент не загружается даже после изменения URL - PullRequest
Новая
       75

ReactJS: компонент не загружается даже после изменения URL

0 голосов
/ 13 декабря 2018

Проведя время с методами 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,
);

Хотя я получаю следующий diff в состоянии Redux (как показано ниже), но он не отражается в состоянии React.

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

Мне кажется, я где-то испортил связь redux с react-router.Пробовал использовать кредиты решения withRouter: https://stackoverflow.com/a/45036930/2302156.

Я также пытался передать опции в метод connect из react-redux согласно следующему руководству API :

[pure] (Boolean): если true, connect () будет избегать повторного рендеринга и вызовов mapStateToProps, mapDispatchToProps и mergeProps, если соответствующие объекты state / props остаются равными на основе их соответствующих проверок на равенство.Предполагается, что обернутый компонент является «чистым» компонентом и не зависит от какого-либо ввода или состояния, кроме его свойств и состояния выбранного хранилища Redux.Значение по умолчанию: 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"

Кто-нибудь, кто может помочь мне исправить это?

Ответы [ 2 ]

0 голосов
/ 20 декабря 2018

Это не сработало из-за неправильной зависимости.

Изменения в 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,
);
0 голосов
/ 13 декабря 2018

Я считаю, что в Main.js вы должны использовать {this.props.children} вместо {React.cloneElement(props.children, props)}.React.cloneElement работает правильно, если ваш ребенок - единственный элемент React, а ваш 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;
...