React Router実際の経路を確認してください

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

主な目標は、「ホーム」コンポーネント内の「タイトル」という条件付きコンポーネントをレンダリングすることです。

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は、たとえば、タイトルがタイトル1であり、実際のURLが/他のであれば、タイトルはタイトル2であるということである：これは私のホームコンポーネントです。問題は、実際のパスを確認してタイトルコンポーネントを作成する方法がわからないことです。

ありがとうございました。

Answer 1

ルーティングされたコンポーネント（<Route>コンポーネントに渡されるもの）はlocationと呼ばれる小道具を持ちます。 location.pathnameの現在のパスを確認し、それに基づいて条件を作成できます。