react-router-dom 匹配对象 isExact false

Question

我正在做一个 React 项目。我尝试访问 Header 组件中的 url 参数。然而，它总是returns空的。

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 为假。谁能帮我这个？谢谢

Answer 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 路径不匹配时呈现它。

Answer 2

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

react-router-dom 匹配对象 isExact false

react-router-dom match object isExact false

reactjs

redux

react-router-dom