React-Router v4를 통한 값 전달

React-Router v4를 통한 값 전달

질문:.Prop 또는 _id와 같은 단일 값을 React-Router's Link 컴포넌트에 전달하여 엔드포인트에서 포착하려면 어떻게 해야 합니까?

제 말은 이렇습니다.예를 들어 /a페이지에 있다고 칩시다.이 링크는 사용자를 /b로 이동합니다.그렇게 해서<Link to='/b'>이제 링크를 통해 /a에서 /b로 _id를 전달해야 합니다.

<Link to='/b' params={_id}>blah blah</Link>

전달하려는 ID는 Link 구성 요소가 중첩된 개체의 속성입니다.

이 구문을 찾았습니다.params={}다른 StackOverflow 스레드에 있습니다.내 코드가 깨지지 않고 컴파일됐으니 작동했다는 뜻일까?그러나 엔드포인트에서 이 전달된 값을 가져오는 방법을 알 수 없습니다.

어떤 도움이라도 주시면 대단히 감사하겠습니다.

패싱 소품

임의의 소품을 루트에 전달할 수 있습니다.state오브젝트:

<Link to={{ pathname: '/route', state: { foo: 'bar'} }}>My route</Link>

그 후, 에 액세스 할 수 있습니다.state컴포넌트 내의 오브젝트:

const {foo} = props.location.state

console.log(foo) // "bar"

매개 변수 전달

이름 있는 파라미터를 받아들이도록 루트 경로를 설정합니다( ).:id):

<Route path='/route/:id' exact component={MyComponent} />

그러면 링크의 ID와 같은 URL 파라미터를 전달할 수 있습니다.to:

<Link to={`route/foo`}>My route</Link>

컴포넌트 내의 파라미터에 액세스 할 수 있습니다.match오브젝트:

const {id} = props.match.params

console.log(id) // "foo"

원천

• https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md

• https://github.com/ReactTraining/react-router/issues/4036

Link 컴포넌트를 통해 데이터를 전달하려면 실제 링크의 파라미터를 받아들이기만 하면 됩니다.

<Link to={`/b/${_id}`}>blah blah</Link>

루트에 이런 걸 설치해서

<Route path="b/:id" name="routename" component={foo}></Route>

다음으로 새로운 루트의 파라미터에 액세스 할 수 있습니다.this.props.match.params.id

만약 당신이 정말로 당신의 신분증을 실제 경로에서 원하지 않는다면, 그것은 조금 더 짜증나게 될 것이다.

루트를 통해 복수의 파라미터를 송신하는 경우는, 다음과 같이 실시할 수 있습니다.

1. 링크 요소

<Link to={`/exchangeClicked/${variable1} ,${variable2},${variable3}`} >Click
</Link>

2. 이들 파라미터를 받아들이도록 루트 경로를 설정합니다.

<Route
      exact
      path="/exchangeClicked/:variable1,:variable2,:variable3"
      component={MyComponent}
 />

3. 다음으로 새로운 루트의 파라미터에 액세스 할 수 있습니다.

<Typography variant="h4" color="inherit">
    Exchange:{this.props.match.params.variable1}
</Typography>


<Typography variant="Body 1" color="inherit">
    Type:{this.props.match.params.variable2}
</Typography>

<Typography variant="Body 1" color="inherit">
    Durabiliy:{this.props.match.params.variable3}
</Typography>

리액트 훅을 사용하는 경우 useLocation을 사용하여 상태 객체에서 전달된 파라미터를 얻을 수 있습니다.

1. 다른 페이지 링크

<Link to={{ pathname: `page/${id}`, state: { foo: 'bar'} }}>Click me</Link>

2. 루트를 선언하다

<Route
  exact
  path={`page/:id`}
  component={BComponent}
/>

3. 위치 매개 변수를 가져온 다음 키-값 쌍 개체를 포함하는 사용 상태를 가져옵니다.

const BComponent = (props) => {
  const location = useLocation();
  console.log(location.state.foo);

  return ()
}

언급URL : https://stackoverflow.com/questions/45598854/passing-values-through-react-router-v4-link