时间戳

首页 > 解决方案 > react-router-dom 匹配对象 isExact false

reactjs - react-router-dom 匹配对象 isExact false

问题描述

我正在做一个反应项目。我尝试访问 Header 组件中的 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;

我尝试访问 Header 组件中的 url 参数。参数为空，isExact 为假。谁能帮我这个？谢谢。

标签： reactjsreduxreact-router-dom

解决方案

我仍然无法弄清楚如何解决这个问题。为了解决这个问题，我要做的是创建一个高阶组件。Header 会包含在 HOC 中，那么获取 URL 参数就没有问题了。

推荐阅读