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이/가정 예를 들어, 제목이 TITLE1이며 실제 URL은/다른 경우 제목이 제목 2점이다 : 이것은 내 홈 구성 요소입니다. 문제는 실제 경로를 확인한 다음 제목 구성 요소를 작성하는 방법을 모르겠다는 것입니다.

감사합니다.

Answer 1

라우팅 된 구성 요소 (<Route> 구성 요소에 전달 된 구성 요소)에는 location이라는 보조가 있습니다. location.pathname을보고 현재 경로가 무엇인지 확인하고이를 기반으로 조건을 만들 수 있습니다.