Маршруты не перемещаются при настройке React v15.5 с react-redux v5.

Я новичок в React и настроил свой проект React с помощью create-react-app Facebook. . Вот основные файлы:

Index.js

import React from 'react';
import ReactDOM, { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';

import { createStore, applyMiddleware } from "redux";
import { Provider } from 'react-redux'
import { routerMiddleware, syncHistoryWithStore } from 'react-router-redux';
import thunk from 'redux-thunk';
import reducers from './reducers';

import App from './containers/App';
import Routes from "./Routes";

const browserHistory = createHistory();
middleware = routerMiddleware(browserHistory);
const store = createStore(reducers, applyMiddleware(middleware, thunk))
const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>
      <App />
    </Router>
  </Provider>, document.getElementById('root')
);

Routes.js

import React, { Component } from 'react';
import { Route, Switch } from 'react-router';

import Home from './containers/Home';
import About from './containers/About';
import Contact from './containers/Contact';

class Routes extends Component {
  render() {
    return (
      <Switch>
        <Route exact path="/" component={ Home } />
            <Route path="/about" component={ About } />
            <Route path="/contact" component={ Contact } />
      </Switch>
    );
  }
}

export default Routes;

App.js

import React, { Component } from "react";
import { Link } from 'react-router-dom';
import Routes from "../Routes";
import SideNav from '../presentation/SideNav';

class App extends Component {
    render() {
        return (
            <div>
              <Link to='/'>Home</Link>
              <Link to='/about'>about</Link>
              <Link to='/contact'>contact</Link>
              <SideNav />
               <Routes />
            </div>
        );
    }
}

export default App;

Проблема, с которой я сталкиваюсь, заключается в том, что когда я загружаю страницу с определенным маршрутом, этот компонент отображается в браузере. Но если я перехожу по другому маршруту, используя «Ссылка», скажем

<Link to='/contact'>contact</Link>

В этом случае компонент /contact не загружается, но маршрут меняется и отображается в браузере.

Я искал решения, но в основном использовал устаревший код, даже в react-router-redux, пример содержит ConnectedRouter, которого нет в обновленном пакете.

Эти зависимости используются

Я не знаю, сделал ли я какую-то глупую ошибку в коде или чего-то не хватает.

Заранее спасибо. :)


reactjs javascript react-redux react-router react-router-redux
person rajat    schedule 13.07.2017    source источник
comment
Можете ли вы скопировать и вставить журналы консоли?   -  person hisener    schedule 13.07.2017
comment
Ошибок в консоли нет, только предупреждения об импортированных файлах, которые не используются.   -  person rajat    schedule 13.07.2017
comment
Если я полностью удалю избыточность из index.js... тогда маршрутизация работает нормально, как и ожидалось...   -  person rajat    schedule 13.07.2017

Ответы (1)


arrow_upward
5
arrow_downward

Решение находится здесь

import { withRouter } from 'react-router-dom'

// before
export default connect(mapStateToProps)(Something)

// after
import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(Something))

Как правило, React Router и Redux прекрасно работают вместе. Однако иногда приложение может иметь компонент, который не обновляется при изменении местоположения (дочерние маршруты или активные навигационные ссылки не обновляются).

Это происходит, если:

  • Компонент подключается к редуксу через connect()(Comp).
  • Компонент не является «компонентом маршрута», то есть он не отображается следующим образом: <Route component={SomeConnectedThing}/>

Проблема в том, что Redux реализует shouldComponentUpdate, и нет никаких признаков того, что что-то изменилось, если он не получает реквизиты от маршрутизатора. Это легко исправить. Найдите, куда вы подключаете свой компонент, и оберните его withRouter.

person rajat    schedule 13.07.2017