时间戳

首页 > 解决方案 > React Router 最初不渲染组件

reactjs - React Router 最初不渲染组件

问题描述

这对我来说很奇怪。我在本地启动我的应用程序。我的应用程序中只有一个 Header 和 TaskPage ，就像这样。 

  import React, { Component } from 'react';
  import { withRouter } from 'react-router-dom';
  import { connect } from 'react-redux';
  import Header from '../components/header';
  import TasksPage from '../pages/tasks';
  import { Route } from 'react-router';

  class App extends Component {
    render() {
      return (
        <div>
         <Header />
           <main>
             <Route exact path="/" component={TasksPage} />
          </main>
        </div>
      );
    }
  }



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

然后是我的路由器的东西。 

  import './views/styles/styles.css';

  import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import { ConnectedRouter } from 'react-router-redux';
  import history from './history';
  import configureStore from './store';
  import registerServiceWorker from './utils/register-service-worker';
  import App from './views/app';
  import TaskPage from './views/pages/tasks'

  const store = configureStore();
  const rootElement = document.getElementById('root');


  function render(Component) {
  console.log('COMPONENT::',Component);
   ReactDOM.render(
    <Provider store={store}>
      <ConnectedRouter history={history}>
       <div>
        <Component />
        </div>
       </ConnectedRouter>
       </Provider>,
        rootElement
        );
       }


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


    registerServiceWorker();

我最初得到一个空白页。但是，如果我对应用程序页面进行更改并在应用程序运行时保存它，例如只是一个空格或换行，一些无关紧要的东西，我会突然得到我的任务页面。那么它工作正常。在此过程中，我的控制台中的任何时候都没有错误，所以我认为当应用程序最初加载时我的路由有问题。

或者也许它与这个 TaskPage 有关。 

 import React, { Component } from 'react';
 import { List } from 'immutable';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { createSelector } from 'reselect';
 import { getTaskFilter, getVisibleTasks, tasksActions } from 'src/tasks';
  import TaskFilters from '../../components/task-filters';
 import TaskForm from '../../components/task-form';
 import TaskList from '../../components/task-list';


export class TasksPage extends Component {
static propTypes = {
createTask: PropTypes.func.isRequired,
filterTasks: PropTypes.func.isRequired,
filterType: PropTypes.string.isRequired,
loadTasks: PropTypes.func.isRequired,
location: PropTypes.object.isRequired,
removeTask: PropTypes.func.isRequired,
tasks: PropTypes.instanceOf(List).isRequired,
updateTask: PropTypes.func.isRequired
};

componentWillMount() {
this.props.loadTasks();
this.props.filterTasks(
  this.getFilterParam(this.props.location.search)
);
}

componentWillReceiveProps(nextProps) {
if (nextProps.location.search !== this.props.location.search) {
  this.props.filterTasks(
    this.getFilterParam(nextProps.location.search)
  );
 }
}

componentWillUnmount() {
 // this.props.unloadTasks();
 }

getFilterParam(search) {
const params = new URLSearchParams(search);
return params.get('filter');
}

render() {
return (
  <div className="g-row">
    <div className="g-col">
      <TaskForm handleSubmit={this.props.createTask} />
    </div>

    <div className="g-col">
      <TaskFilters filter={this.props.filterType} />
      <TaskList
        removeTask={this.props.removeTask}
        tasks={this.props.tasks}
        updateTask={this.props.updateTask}
      />
    </div>
  </div>
  );
 }
 }


 //=====================================
//  CONNECT
//-------------------------------------

 const mapStateToProps = createSelector(
getTaskFilter,
getVisibleTasks,
(filterType, tasks) => ({
 filterType,
 tasks
 })
 );

const mapDispatchToProps = Object.assign(
 {},
 tasksActions
  );

export default withRouter(connect(
mapStateToProps,
 mapDispatchToProps
 )(TasksPage));

标签： reactjsreact-routerreact-redux

解决方案

那么热加载的东西或者我设置它的方式？我不是说它是最好的答案，但它确实解决了我的问题。如果有人能比我更清楚地解释这一点，我会很乐意接受关于这个主题的更清晰的回应

这应该根据文档起作用。但我将其注释掉并返回到仅使用 ReactDOM.Render 和我的 . 没有包装的 Function 或 . 奇怪的是，热加载似乎仍然有效。 

// function render(Component) {
 ReactDOM.render(
  <Provider store={store}>
   <ConnectedRouter history={history}>
     <div>
      <App/>
    </div>
  </ConnectedRouter>
</Provider>,
rootElement
 );
// }


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

仅供参考 - 我是 react-router 4.x、Redux 5.x、React 15.x。

推荐阅读