React Router изначально не рендерит компонент - PullRequest
Новая
       8

React Router изначально не рендерит компонент

0 голосов
/ 21 мая 2018

Это странно для меня.Я запускаю свое приложение локально.У меня просто есть Заголовок и 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();

Я изначально получаю пустую страницу.Но если я внесу изменения на страницу приложения и сохраню ее во время работы приложения, например, просто пробел или возврат строки, что-то незначительное, я внезапно получу страницу с заданиями.Это работает хорошо тогда.У меня нет ошибок в консоли во время этого процесса, поэтому я думаю, что у меня что-то не так с маршрутизацией где-то, когда приложение изначально загружается.

Или, может быть, это как-то связано с этой страницей задач.

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

1 Ответ

0 голосов
/ 21 мая 2018

Так что-то с горячей загрузкой или, может быть, так, как я это сделал?Я не говорю, что это лучший ответ, но он решил мою проблему.Если кто-то сможет объяснить это лучше, чем я, я с радостью приму более четкий ответ по этому вопросу

Это должно сработать на основе документов .Но я прокомментировал это и вернулся к использованию 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);
 //   })
// }

К вашему сведению - я реагирую-маршрутизатор 4.x, Redux 5.x, React 15.x.

...