Question

我是React JS的新手，我想使用React Router检查实际路由。这是切入点：

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'),
);

主要目标是在我的Home组件中渲染名为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 };

条件是如果实际网址是/ home，例如，标题是 Title1 ，如果实际网址是/其他标题是 Title2 。问题是我不知道如何检查实际路径，然后构建标题组件。

感谢。

Answer 1

路由组件（传递给<Route>组件的组件）将有一个名为location的道具。您可以检查location.pathname查看当前路径，并根据该路径创建条件。

React Router检查实际路径

1 个答案: