[javascript] react-router가 자식 구성 요소에서 this.props.location을 가져옵니다.

Program / 글쓴이

내가 이해하는대로 및 같은 라우팅 관련 소품을 <Route path="/" component={App} />제공합니다 . 내 구성 요소에 중첩 된 하위 구성 요소가 많이있는 경우 하위 구성 요소가 다음없이 이러한 소품에 액세스하도록하려면 어떻게해야합니까?ApplocationparamsApp

  • 앱에서 소품 전달
  • 창 개체 사용
  • 내포 된 하위 구성 요소에 대한 경로 작성

this.context.router경로와 관련된 정보가있을 거라고 생각했는데 경로 this.context.router를 조작하는 기능 만있는 것 같습니다.

답변

(업데이트) V5.1 & Hooks (React> = 16.8 필요)

당신은 사용할 수 있습니다 useHistory, useLocation그리고 useRouteMatch구성 요소에서 얻을 수 match, history과 location.

const Child = () => {
  const location = useLocation();
  const history = useHistory();
  const match = useRouteMatch("write-the-url-you-want-to-match-here");

  return (
    <div>{location.pathname}</div>
  )
}

export default Child

(업데이트) V4 및 V5

당신은 사용할 수 있습니다 withRouter주입하기 위해 HOC를 match, history그리고 location구성 요소 소품이다.

class Child extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>{location.pathname}</div>
    )
  }
}

export default withRouter(Child)

(업데이트) V3

당신이 사용할 수있는 withRouter주입하기 위해 HOC를 router, params, location, routes구성 요소 소품이다.

class Child extends React.Component {

  render() {
    const { router, params, location, routes } = this.props

    return (
      <div>{location.pathname}</div>
    )
  }
}

export default withRouter(Child)

원래 답변

props를 사용하지 않으려면 React Router 문서에 설명 된대로 컨텍스트를 사용할 수 있습니다.

먼저 설정해야합니다 당신 childContextTypes과getChildContext

class App extends React.Component{

  getChildContext() {
    return {
      location: this.props.location
    }
  }

  render() {
    return <Child/>;
  }
}

App.childContextTypes = {
    location: React.PropTypes.object
}

그러면 다음과 같은 컨텍스트를 사용하여 자식 구성 요소의 위치 개체에 액세스 할 수 있습니다.

class Child extends React.Component{

   render() {
     return (
       <div>{this.context.location.pathname}</div>
     )
   }

}

Child.contextTypes = {
    location: React.PropTypes.object
 }

답변

위의 솔루션이 효과가 없다면 다음을 사용할 수 있습니다. import { withRouter } from 'react-router-dom';

이것을 사용하여 자식 클래스를 다음과 같이 내보낼 수 있습니다.

class MyApp extends Component{
    // your code
}

export default withRouter(MyApp);

그리고 라우터를 사용하는 수업-

// your code
<Router>
      ...
      <Route path="/myapp" component={MyApp} />
      // or if you are sending additional fields
      <Route path="/myapp" component={() =><MyApp process={...} />} />
<Router>

답변