Маршрутизация в реакции Js - PullRequest
1 голос
/ 17 марта 2020
import React from 'react'
import {CollectionPage} from '../collection/collection.component'
import './page.shop.scss'
import CollectionOverview from '../../components/collection-overview/component.collection-overview'
import { Route } from 'react-router-dom'
const ShopPage = ({ match }) => (
    <div className='shop-page'>

       <Route exact path={`${match.path}`} component={CollectionPage} />

    </div>
  );
export default ShopPage

это работает ^

      <Route exact path={`${match.path}`} component={CollectionOverview} />

это работает также


       <Route exact path={`${match.path}`} component={CollectionOverview} />
       <Route path={`${match.path}/:collectionId`} component={CollectionPage} />

это работает, но когда я go к ${match.path}/:collectionId это ничего не показывает , может кто-то укажет мне на проблему с <Route path={'${match.path}/:collectionId'}component={CollectionPage} /> потому что это просто ничего не покажет.

Ответы [ 2 ]

0 голосов
/ 10 мая 2020

Это ответ на вопросы и ответы. Пожалуйста, проверьте ваши маршруты для точного пути при рендеринге в первый раз. Для ShopPage в приложении. js пожалуйста, удалите точный путь. И держите путь для экскаватора в шоппинге.

  1. В приложении. js удаление точного <Route path="/shop" component={ShopPage} />

  2. В магазине.

const ShopPage = ({ match }) => ( ` <div className="shop-page">` <Route exact path={`${match.path}`} component={CollectionOverview} />` <Route path={`${match.path}/:collectionId`} component={FinalCollectionPageComp} /> </div> `);

Надеюсь, это поможет

0 голосов
/ 17 марта 2020

Передали ли вы collectionId на ваш URL?

  1. если вы не передали collectionId, это означает, что он будет go на первом маршруте
  2. , если вы передадите collectionId, в этот раз он проверит, соответствует ли URL или нет он не будет сильно проверять.
  3. , если вы хотите строго передать collectionId, тогда добавьте точное ключевое слово ко второму маршруту.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...