Вложенная навигация с параметрами не работает в реакции-маршрутизатор-дом - PullRequest
Новая
       4

Вложенная навигация с параметрами не работает в реакции-маршрутизатор-дом

0 голосов
/ 13 января 2020

Я пытаюсь использовать вложенную маршрутизацию внутри моего приложения. в этом случае страница магазина находится по адресу / shop , и я хочу отобразить CollectionsOverview в / shop / и CollectionPage в / shop /: collection и CollectionsOverview работает нормально, но CollectionPage не работает. Я даже пытался использовать жестко закодированный путь, как / shop / ab c, но он все еще не работает .., пожалуйста, помогите

версия моей реакции-роутера: ^ 5.0.0 

import React from 'react';
import {Route, Switch,Router} from 'react-router-dom';


function CollectionPage() {
  return (
    <div className="App">
      CollectionPage
    </div>
  );
}

function CollectionsOverview() {
  return (
    <div className="App">
      CollectionsOverview
    </div>
  );
}

 export default function ShopPage({match}){
return(
  <div className='shop-page'>
    <Router>
  <Switch>
    <Route exact path={`${match.path}`} component={CollectionsOverview}/>
    <Route exact path={`${match.path}/:collectionId `} component={CollectionPage}/>
    </Switch>
    </Router>
  </div>
)
}

1 Ответ

0 голосов
/ 13 января 2020

Попробуйте, так как у вас уже есть Router, обертывающий ваш App компонент, вам не нужен другой, имеющий собственный контекст в ShopPage, так как он, предположительно, изначально маршрутизируется из App в контексте Router, который находится в App

export default function ShopPage({match}){
  return (
    <div className='shop-page'>
      <Switch>
        <Route exact path={`${match.path}`} component={CollectionsOverview}/>
        <Route exact path={`${match.path}/:collectionId `} component={CollectionPage}/>
      </Switch>
    </div>
  );
}

Вам понадобится Switch только для определения решения по навигации для его Route компонентов

...