Как Маршрутизация (реагировать v3), когда компонент импортируется также маршрут? - PullRequest
Новая
       6

Как Маршрутизация (реагировать v3), когда компонент импортируется также маршрут?

0 голосов
/ 20 декабря 2018

Я имею дело с проблемой, и мне кажется, что я что-то упустил.

У меня есть основной маршрут, содержащий импортный компонент , который также имеет маршрутизацию

Япытаюсь выполнить маршрутизацию внутри компонента импорта.

Если я напишу localhost: 9010 / testPath , я получаю ComponentThatImport и это нормально.

Но я пытаюсь localhost: 9010 / testPath / subPath

, и я ничего не получаю, на самом деле это тот же localhost: 9010 / testPath

основной маршрут 

  const App = () => (
  <Provider store={ store }>
    <Router history={ syncedHistory }>
      <Route component={ Root }>
        <Route path={ '/testPath' }>
          <IndexRoute component={ ComponentThatImport }/>
        </Route>
      </Route>
    </Router>
  </Provider>
);

Компонент, импортируемый из npm install 

    const ComponentThatImport = () => (
      <Router>
         <div>
            <div>main ComponentThatImport</div>
            <Route path={ '/subPath' } component={ someComonnet }>
         </div>
      </Router>
    );

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

В реакции-маршрутизаторе v3 маршруты не определены во вложенных компонентах, а определены как дочерние элементы компонента Route.Также вам нужно иметь только один экземпляр Router в качестве поставщика 

const App = () => (
  <Provider store={ store }>
    <Router history={ syncedHistory }>
      <Route path="/" component={ Root }>
        <Route path={ 'testPath' } component={ComponentThatImport}>
          <Route path="subPath" component={SubComponentThatImport}/>
        </Route>
      </Route>
    </Router>
  </Provider>
);

const ComponentThatImport = ({children}) => (
     <div>
        <div>main ComponentThatImport</div>
        {children}
     </div>
);

Рабочие коды и поле

0 голосов
/ 21 декабря 2018

Ваш ComponentThatImport должен содержать children как 

const ComponentThatImport = ({children}) => (
   <div>
      <div>main ComponentThatImport</div>
      {children}
   </div>
);

const SubComponentThatImport = () => (
   <div>
      <div>sub ComponentThatImport</div>
   </div>
);

const App = () => (
  <Provider store={ store }>
    <Router>
      <Route path="/" component={MainLayout}>
        <Route path="testPath" component={ComponentThatImport}>
          <Route path="subPath" component={SubComponentThatImport}/>
        </Route> 
      </Route>
    </Router>
  </Provider>
);

Пример: https://codepen.io/v123582/pen/MZpWOd

...