Соответствие объекта router-router-dom isExact false - PullRequest
Новая
       11

Соответствие объекта router-router-dom isExact false

1 голос
/ 07 июня 2019

Я работаю над реактивным проектом.Я пытаюсь получить доступ к параметрам URL в компоненте заголовка.Однако он всегда возвращает пустое значение. 

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router'
import SamplePage from './pages/SamplePage';
import PropertyPage from './pages/PropertyPage';
import LoadingPage from './pages/LoadingPage';
import Header from './header/Header';
import ButtonGroup from './ButtonGroup';
import { Container } from 'semantic-ui-react';
import history from '../history';

const App = () => {
  return (
    <ConnectedRouter history={history}>
      <div>
        <Switch>
          <Route path='/loading' exact component={LoadingPage} />
          <Route component={Header} title='Sample page' />
        </Switch>
        <Container style={{ marginTop: '7em' }}>
          <Switch>
            <Route
              path='/page/:pageType/properties/:propertyId'
              exact
              component={PropertyPage}
            />
            <Route path='/page/:pageType' exact component={SamplePage} />
          </Switch>
        </Container>
        <Switch>
          <Route exact path='/loading' render={() => <div />} />
          <Route component={ButtonGroup} />
        </Switch>
      </div>
    </ConnectedRouter>
  );
}

export default App;

Я пытаюсь получить доступ к параметрам URL в компоненте Header.Параметр пуст, а isExact - false.Кто-нибудь может мне с этим помочь?Спасибо.

Ответы [ 2 ]

1 голос
/ 07 июня 2019

На скриншоте console.log, react-router совпадает на 

<Route component={Header} title='Sample Scorecard' />

Это правильное поведение, так как Switch ищет первое совпадение.

Я предлагаю не объявлять рендеринг для Header как Route. т.е. 

<Switch>
    <Route path='/loading' exact component={LoadingPage} />
    <Header title='Sample Scorecard' />
</Switch>

Таким образом, Switch будет отображать его, только если loading путь не найден.

0 голосов
/ 10 июня 2019

Я до сих пор не могу понять, как решить эту проблему. Чтобы обойти эту проблему, я создаю компонент высшего порядка. Заголовок будет включен в HOC, тогда у него не будет проблем с получением параметров URL.

...