react-router-dom 匹配对象 isExact false

Posted 2023-02-22

【中文标题】react-router-dom 匹配对象 isExact false

【英文标题】：react-router-dom match object 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 对象下看到我的路径名。

【参考方案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参数就没有问题了。