React-Router@4: Маршруты не переключаются нормально с [email protected]

Я создаю приложение React с React-Router@4 и [email protected] и Webpack@2^.

Происходят странные вещи,

у меня есть маршруты, объявленные в файле routes.js, как это

/* global __DEV__ */
import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';

// import asyncRoute from './asyncRoute';
// const Welcome = asyncRoute(() => import('../views/Welcome'));
// const About = asyncRoute(() => import('../views/About'));
// const Topics = asyncRoute(() => import('../views/Topics'));

import Welcome from '../views/Welcome';
import About from '../views/About';
import Topics from '../views/Topics';

const Routes = ({ ...properties }) => {
  return (
    <div>
      <div>
        Dummy Links to check Code Splitting
        <ul>
         <li><Link to="/">Welcome</Link></li>
         <li><Link to="/about">About</Link></li>
         <li><Link to="/topics">Topics</Link></li>
       </ul>
      </div>
      <Switch>
        <Route exact path="/" component={Welcome} />
        <Route path="/about" render={(props) => <h3>About</h3>} />
        <Route path="/topics" component={Topics} />
      </Switch>
    </div>
  );
}

export default Routes;

// This will enable/force Hot Module replacement on __DEV__ environment.
// if (__DEV__) {
//   require('../views/Welcome');
//   require('../views/About');
//   require('../views/Topics');
// }

Мой Main.js файл выглядит так,

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';

import configureStore from './redux/configureStore';

const initialState = window.__INITIAL_STATE__;
const store = configureStore(initialState);

import './styles/main.css';

import Root from './views/Root';

function render(Root) {
  ReactDOM.render(
    <AppContainer>
      <Root store={ store } />
    </AppContainer>,
    document.getElementById('root')
  );
}

if (module.hot) {
  module.hot.accept('./views/Root', () => {
    const nextRoot = require('./views/Root').default;
    render(nextRoot);
  });
}

render(Root);

Нормального переключения маршрутов не происходит, вы можете посмотреть приложенное видео ниже

https://share.viewedit.com/XbjKCUjbcvhcL3xRXm8kX7

Из видео видно, что при обычном нажатии на ссылки не происходит повторного рендеринга, но когда я что-то меняю в каком-либо компоненте, во время рендеринга переключаемого пути происходит исправление react-hot-loader.< /сильный>

Мой проект находится на этом пути https://github.com/bboysathish/react-boilerplate/tree/dev

Как я могу решить эту проблему?


webpack reactjs javascript react-router react-hot-loader
person Sathish    schedule 20.04.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле получается БЭ блокировка распространения контекста.

Пожалуйста, выполните следующие изменения, чтобы ваше приложение работало так, как вы ожидаете:

diff --git a/app/routes/Routes.js b/app/routes/Routes.js
index 2b9b787..45dbcbf 100644
--- a/app/routes/Routes.js
+++ b/app/routes/Routes.js
@@ -22,7 +22,7 @@ const Routes = ({ ...properties }) => {
          <li><Link to="/topics">Topics</Link></li>
        </ul>
       </div>
-      <Route path="/" component={Welcome} />
+      <Route path="/" exact component={Welcome} />
       <Route path="/about" component={About} />
       <Route path="/topics" component={Topics} />
     </div>
diff --git a/app/views/App.js b/app/views/App.js
index 405414c..c712c3a 100644
--- a/app/views/App.js
+++ b/app/views/App.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { withRouter } from "react-router-dom";

 class App extends Component {
   render() {
@@ -12,4 +13,4 @@ class App extends Component {
   }
 }

-export default connect()(App);
+export default withRouter(connect()(App));

Давайте немного углубимся в это:

-export default connect()(App);
+export default withRouter(connect()(App));

Это позволит убедиться, что ваш подключенный компонент реагирует на изменения контекста. React-redux не перерисовывает компонент при изменении контекста, и это известная проблема.

-      <Route path="/" component={Welcome} />
+      <Route path="/" exact component={Welcome} />

Это гарантирует, что ваш компонент Welcome будет отображаться только на точном URL-адресе /.

person BTMPL    schedule 21.04.2017