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

Question

我正在开发一个 react 项目。我尝试访问 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 参数。 params 为空，isExact 为 false。谁能帮我这个？谢谢。

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