除非页面被刷新，否则 React Router 不会渲染 Route 组件答案

【问题标题】：React Router will not render Route component unless page is refreshed除非页面被刷新，否则 React Router 不会渲染 Route 组件
【发布时间】：2017-09-08 20:19:57
【问题描述】：

除非我刷新页面，否则我的应用程序似乎不会呈现传递给<Route /> 的组件。我可能做错了什么？

components/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

我还注意到，当我从 MainContainer 控制台登录 this.props 时，我没有看到任何与路由器相关的内容，例如 this.props.location.pathname -- 可能我的应用程序结构不正确？

【问题讨论】：

标签： reactjs redux react-router

【解决方案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;

【讨论】：

【解决方案2】：

我认为您必须对代码进行更多调整才能使其正常工作。假设您使用 react-router v4，以下应该可以解决您的问题。

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

  <Provider store={store}>
    <BrowserRouter>
      <div>
        <Switch>
            <SidebarContainer />
            <MainContainer />
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>

【讨论】：