Question

这对我来说很奇怪。我在本地启动我的应用程序。我只是在我的应用程序中有一个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();

我最初得到一个空白页面。但是，如果我在应用程序运行时对App页面进行更改并保存，就像空格或行返回一样，那些无关紧要的东西，我突然得到了我的任务页面。它工作正常。在此过程中我的控制台中没有任何错误，因此我认为在应用程序最初加载时我的路由有问题。

或者它可能与此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));

Answer 1

那么热门加载或者我设置它的方式？我不是说它最好的答案，但确实解决了我的问题。如果有人能够更好地解释这一点，我会高兴地接受关于这个主题的更明确的回应

这应该基于docs。但是我对它进行了评论并回到了使用ReactDOM.Render和我的。没有包裹的功能或。奇怪的是，加载似乎仍然有效。

// 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);
 //   })
// }

仅供参考 - Im react-router 4.x，Redux 5.x，React 15.x.

React Router最初不渲染组件

1 个答案: