React Router v4-현재 경로를 얻는 방법?

React Router v4-현재 경로를 얻는 방법?

---

나는 표시 할 title에 <AppBar />그 어떻게 든 현재의 경로에서 전달됩니다.

React Router v4 <AppBar />에서 현재 경로를 titleprop에 어떻게 전달할 수 있습니까?

  <Router basename='/app'>
    <main>
      <Menu active={menu} close={this.closeMenu} />
      <Overlay active={menu} onClick={this.closeMenu} />
      <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' />
      <Route path='/customers' component={Customers} />
    </main>
  </Router>

사용자 정의에서 사용자 정의 제목을 전달하는 방법이 prop에은 <Route />?

---

반응 라우터 4에서 현재 경로는- this.props.location.pathname입니다. 그냥 얻고 this.props확인하십시오. 그래도 보이지 않으면 location.pathname데코레이터를 사용해야합니다 withRouter.

다음과 같이 보일 수 있습니다.

import {withRouter} from 'react-router-dom';

const SomeComponent = withRouter(props => <MyComponent {...props}/>);

class MyComponent extends React.Component {
  SomeMethod () {
    const {pathname} = this.props.location;
  }
}

---

반응 파일의 끝이 다음과 같은 반응의 템플릿 export default SomeComponent을 사용하는 경우 : 상위 구성 요소 (종종 "HOC"라고 함)를 사용해야합니다 withRouter.

먼저 다음 withRouter과 같이 가져와야합니다 .

import {withRouter} from 'react-router-dom';

다음으로, 당신은 할 수 있습니다 사용합니다 withRouter . 구성 요소의 내보내기를 변경하여이를 수행 할 수 있습니다. 에서 export default ComponentName로 변경하고 싶을 것 export default withRouter(ComponentName)입니다.

그런 다음 소품에서 경로 (및 기타 정보)를 얻을 수 있습니다. 구체적으로 location,, match및 history. 경로 이름을 뱉어내는 코드는 다음과 같습니다.

console.log(this.props.location.pathname);

추가 정보가 포함 된 좋은 글은 https://reacttraining.com/react-router/core/guides/philosophy에서 확인할 수 있습니다.

---

나는 React Router (v4)의 저자가 특정 사용자를 달래기 위해 withRouter HOC를 추가했다고 생각합니다. 그러나 더 나은 방법은 render prop을 사용하고 해당 props를 전달하는 간단한 PropsRoute 구성 요소를 만드는 것입니다. withRouter처럼 컴포넌트를 "연결"하지 않기 때문에 테스트하기가 더 쉽습니다. withRouter에 여러 개의 중첩 된 구성 요소가 포함되어 있으면 재미 있지 않을 것입니다. 또 다른 이점은 Route에 원하는 소품을 통해이 패스를 사용할 수도 있다는 것입니다. 다음은 render prop을 사용하는 간단한 예입니다. (웹 사이트 https://reacttraining.com/react-router/web/api/Route/render-func ) (src / components / routes / props-route)의 거의 정확한 예

import React from 'react';
import { Route } from 'react-router';

export const PropsRoute = ({ component: Component, ...props }) => (
  <Route
    { ...props }
    render={ renderProps => (<Component { ...renderProps } { ...props } />) }
  />
);

export default PropsRoute;

사용법 : (경로 매개 변수 (match.params)를 얻으려면이 구성 요소를 사용할 수 있으며 전달됩니다)

import React from 'react';
import PropsRoute from 'src/components/routes/props-route';

export const someComponent = props => (<PropsRoute component={ Profile } />);

또한이 방법으로 원하는 추가 소품을 전달할 수 있습니다.

<PropsRoute isFetching={ isFetchingProfile } title="User Profile" component={ Profile } />

---

자세히 알아보기를 사용하는 솔루션은 다음과 같습니다.history

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

라우터 내부

<Router>
   {history.location.pathname}
</Router>

참고 URL : https://stackoverflow.com/questions/42253277/react-router-v4-how-to-get-current-route