路由器检查实际路径

Question

我是新的反应JS和我想要检查实际的路线使用React路由器。这是切入点：

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <HeaderControl />
        <MuiThemeProvider>
          <Switch>
            <Routes />
            <PrivateRoute path="/" component={Home} />
          </Switch>
        </MuiThemeProvider>
        <Footer />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app'),
);

主要目标是在my组件中呈现一个名为Title的条件组件。这是我的家庭组件：

import React, { Component } from 'react';
import { Title } from '../Titles/titles';

class Home extends Component {
  render() {
    return (
      <div className="container-view">
        <div className="container-view-inside">
          <Title />
        </div>
      </div>
    );
  }
}

export { Home as default, Title };

条件是，如果实际的url是/home，则标题是Title1，如果实际的url是/other，则标题是Title2。问题是，我不知道如何检查实际路径，然后构建标题组件。

谢谢。

Answer 1

路由组件(传递给<Route>组件的组件)将有一个名为location的支柱。您可以检查location.pathname，看看当前路径是什么，并在此基础上创建一个条件。