react-router-dom 匹配对象 isExact false答案

【问题标题】：react-router-dom match object isExact falsereact-router-dom 匹配对象 isExact false
【发布时间】：2019-10-22 12:36:11
【问题描述】：

我正在做一个反应项目。我尝试访问 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 为假。谁能帮我这个？谢谢。

【问题讨论】：

你是否在一个匹配路径/scorecard/:scorecardType/properties/:propertyId的url上？
@OluwafemiSule。我是。您可以在 location 对象下看到我的路径名。

标签： reactjs redux react-router-dom

【解决方案1】：

从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 路径不匹配时渲染它。

【讨论】：

感谢您的建议。我已经更新了它，但它不会影响 match.params。我还是空了。
console.log 中的路径名是/scorecard/SME。这应该与示例页面的路线相匹配。位置对象下的路径名是什么
是的。位置是正确的。但是match对象下的params是空的，match['path']是'/'。
如果您在正确的位置，我不确定为什么匹配路径是 '/'。我试图复制您的路线设置，但没有什么让我感到惊讶，为什么您会得到不同的结果。 stackblitz.com/edit/…
如果我的console.log在SamplePage.js下，一切都很好。只有当我在 Header 组件下使用它时才会发生这种情况。

【解决方案2】：

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

【讨论】：