Question

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

组件/应用/ 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;

容器/ 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

我也注意到，当我从this.props我调度。MainContainer时，我看不到任何与路由器相关的内容，例如this.props.location.pathname - 我可能没有构建我的应用程序正确？

Answer 1

在github上的react-router问题页面上找到后，我找到了这个帖子：https://github.com/ReactTraining/react-router/issues/4671

似乎redux connect方法阻止了react-router包所需的上下文。

话虽如此，对此的解决方法是将所有具有路由器组件的redux连接组件包含在withRouter()内，如下所示：

<强>容器/ 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;

Answer 2

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

PropertyChanged

除非刷新页面，否则React Router不会呈现Route组件

2 个答案: