Расположение компонента Navbar не обновляется при изменении маршрута, с React Router - PullRequest
Новая
       13

Расположение компонента Navbar не обновляется при изменении маршрута, с React Router

0 голосов
/ 22 сентября 2019

Я создаю приложение в React и пытаюсь обновить панель навигации, когда пользователь переходит на другую страницу.Тем не менее, обнаружение изменения местоположения не является корректным.

Если я перехожу на домашнюю страницу и обновляю страницу, затем нажимаю ссылку «Учетная запись», и учетная запись, и местоположение Navbar.pathname изменяются с «/» на«Учетная запись», как и ожидалось, и консоль правильно пишет «изменить».

Если я затем нажму на ссылку «Главная», Navbar снова правильно обнаружит изменение маршрута.

Однако, если я сейчасСнова нажмите «Аккаунт», местоположение Navbar не обновляется, оно остается «/», и изменение не обнаружено.

Я не вижу различия между этими двумя случаями, но он последовательно работает в первомКогда я нажимаю «Учетная запись», а не второй.

Я прочитал документы React Router о блокирующих компонентах , и я не думаю, что это проблема, потому что панель навигации является верхнейкомпонент уровня, я использую 'location' в качестве реквизита, я не использую purecomponent, а компонент Account обновляется.И я думаю, что если бы это была проблема, это никогда бы не сработало?

Кто-нибудь может подсказать, как я могу заставить навигационную панель последовательно определять, когда меняется маршрут?Спасибо!

Navbar.js: 

class Navbar extends Component {
    constructor(props) {
        super(props);
    }

    componentDidUpdate = (prevProps) => {
        console.log('***');
        console.log('nav old pathname', prevProps.location.pathname);
        console.log('nav new pathname', this.props.location.pathname);

        if (prevProps.location.pathname !== this.props.location.pathname) {
            // this usually doesn't trigger on navigate
            console.log('change');
        }
    }

    render() {
        ...render my html
    }
}

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

App.js: 

const App = () => (
    <Provider store={store}>
        <Router>
            <div>
                <Navbar />
                <div className="container">
                    <Route exact path="/" component={Home} />
                    <Route exact path="/account" component={Account} />
                </div>
            </div>
        </Router>
    </Provider>
);

export default App;

Из package.json: 

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.18",
    "@fortawesome/free-regular-svg-icons": "^5.8.2",
    "@fortawesome/free-solid-svg-icons": "^5.8.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "bootstrap": "^4.2.1",
    "classnames": "^2.2.6",
    "formik": "^1.5.7",
    "i": "^0.3.6",
    "jquery": "^3.4.0",
    "jwt-decode": "^2.2.0",
    "normalizr": "^3.3.0",
    "npm": "^6.9.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "react-markdown": "^4.0.6",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "3.0.0",
    "react-widgets": "^4.4.11",
    "reactstrap": "^7.1.0",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "updeep": "^1.1.0"
  },

Ответы [ 2 ]

1 голос
/ 22 сентября 2019

import Переключение с response-router-dom на ваш App.js 

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

const App = () => (
    <Provider store={store}>
        <Router>
            <div>
                <Navbar />
                <div className="container">
                    <Switch>
                         <Route exact path="/" component={Home} />
                         <Route exact path="/account" component={Account} />
                    </Switch>
                </div>
            </div>
        </Router>
    </Provider>
);

export default App;

не забудьтедля импорта Navbar , Home и Account

0 голосов
/ 22 сентября 2019

Проблема в этой строке: 

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

Вы не используете PureComponent, но используется избыточный connect.Это можно исправить:

...