reactjs - 除非刷新页面，否则 React Router 将不会渲染 Route 组件

Question

看来我的应用程序不会渲染传递给 <Route /> 的组件除非我刷新页面。我可能做错了什么？

组件/App/index.jsx

// dependencies
import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom'

// components
import Header from '../Header';

// containers
import SidebarContainer from '../../containers/SidebarContainer';
import MainContainer from '../../containers/MainContainer';

const App = ({store}) => (
  <Provider store={store}>
    <Router>
      <div className="wrapper">
        <Header />
        <div className="container-fluid container-fluid--fullscreen">
          <div className="row row--fullscreen">
            <SidebarContainer />
            <MainContainer />
          </div>
        </div>
      </div>
    </Router>
  </Provider>
);
App.propTypes = {
  store: PropTypes.object.isRequired,
};

export default App;

containers/MainContainer.jsx

// dependencies
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Route } from 'react-router-dom'

// components
import Dashboard from '../components/Dashboard';
import List from '../components/List';

// containers
import LoginContainer from './LoginContainer.jsx'

class Main extends Component {
  render() {
    console.log(this.props)
    return(
      <div className="wrapper">
        <Route exact path="/" component={Dashboard} />
        <Route path="/login" component={LoginContainer} />
        <Route path="/users" component={List} />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    token: state.authentication.token,
  };
};

const MainContainer = connect(mapStateToProps, null)(Main);

export default MainContainer;

所以当我点击<Link to="/users" />时看起来是这样的组件我的路径更改为 http://localhost:3000/users但该组件不会从 Dashboard 发生变化至List

我还注意到，当我 console.log this.props 时来自MainContainer我没有看到任何与路由器相关的内容，例如 this.props.location.pathname --也许我没有正确构建我的应用程序？

Answer 1

在 github 上浏览 React-router 问题页面后，我发现了这个线程:https://github.com/ReactTraining/react-router/issues/4671

看起来好像 redux connect 方法阻塞了react-router包所需的上下文。

话虽这么说，解决这个问题的方法是用 withRouter() 包装所有包含路由器组件的 redux 连接组件，如下所示:

containers/MainContainer.jsx

// dependencies
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Route, withRouter } from 'react-router-dom' // IMPORT withRouter

// components
import Dashboard from '../components/Dashboard';
import List from '../components/List';

// containers
import LoginContainer from './LoginContainer.jsx'

class Main extends Component {
  render() {
    console.log(this.props)
    console.log(this.context)
    return(
      <div className="wrapper">
        <Route exact path="/" component={Dashboard} />
        <Route path="/login" component={LoginContainer} />
        <Route path="/users" component={List} />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    token: state.authentication.token,
  };
};

// WRAP CONNECT METHOD
const MainContainer = withRouter(connect(mapStateToProps, null)(Main)); 

export default MainContainer;