react-module이 하위 구성 요소에서 이.module.location을 가져옵니다.

react-module이 하위 구성 요소에서 이.module.location을 가져옵니다.

제가 알기로는<Route path="/" component={App} />의지는 준다App같은 라우팅 관련 소품location그리고.params만약 나의App컴포넌트에는 다수의 중첩된 자 컴포넌트가 있습니다.자 컴포넌트가 다음 없이 이들 소품에 액세스하려면 어떻게 해야 합니까?

• 앱에서 소품 전달
• 창 개체 사용
• 중첩된 하위 구성요소에 대한 경로 생성

내 생각에는 말이지…this.context.router루트에 관한 정보가 몇 가지 있습니다만,this.context.router루트를 조작하는 기능은 몇 가지밖에 없는 것 같습니다.

V6

컴포넌트에서 및 을 사용하여및 을 취득할 수 있습니다.

const Child = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const match = useMatch("write-the-url-you-want-to-match-here");

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

export default Child

V5.1 및 훅 (반응 필요 > = 16.8)

컴포넌트에서 및 을 사용하여및 을 취득할 수 있습니다.

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

및 컴포넌트 소품에는 HOC를 사용하여 주입할 수 있습니다.

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

HOC를 사용하여 컴포넌트 소품에 , , 를 삽입할 수 있습니다.

class Child extends React.Component {

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

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

export default withRouter(Child)

원답

소품을 사용하지 않으려면 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);

그리고 Router와 함께 하는 당신의 클래스 -

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

언급URL : https://stackoverflow.com/questions/37516919/react-router-getting-this-props-location-in-child-components