>

화면 왼쪽에 map을 사용하여 표시하는 데이터 목록이 있습니다.를 클릭하면 동일한 화면의 오른쪽에 새 구성 요소가 렌더링되어야하며 URL도 변경되어야합니다. browser, Link to 대신 onClick을 사용하려고 생각했지만 사용하면 url 변경을 지정할 수 없습니다.

const Home = (props) => {
return(
<div className="main-wrapper">
  <div className="service-wrapper">
    <Service/>
  </div>
  <div className="list-wrapper">
    <Route path="/service/service_name" exact component={List}/>
  </div>
</div>
);
}


  • 답변 # 1

    React router v4는 동적 라우팅을 사용합니다. 즉, 위치가 올바른 경로와 일치하면 새 구성 요소가 렌더링 할 수 있습니다.

    원하는 것을 달성하기 위해 새 구성 요소를 렌더링 할 특정 링크 경로로 경로를 추가 할 수 있습니다.

    코드에서 다음 줄을 변경하십시오 :-

    <div className="list-wrapper">
           <Route path="Your path" component={List} /> 
     </div>
    
    

  • 답변 # 2

    onClick을 사용할 수 있지만 반응 라우터 라이브러리에서 제공 한 기록 개체를 사용해야합니다. 다음과 같이 보일 것입니다 :-

    onClick(() => history.push(`/service/${service}`));
    
    

    히스토리에 액세스하려면 반응 라우터 라이브러리에서 Router hoc로 가져와야합니다.

       import { withRouter } from "react-router-dom";
    
        class YourComponent extends Component {
          const { history } = this.props;
        }
        export default withRouter(YourComponent);
    
    

    왼쪽 및 오른쪽 대시 보드 구조는 다음과 같아야합니다 .-

    const LeftDashboard = () => {
       return (
        <div>
         // rest of your ui
        </div>
       )
    }
    const RightDashboard = ({ activeParam }) => {
      const renderActive = () => {
         switch(activeParam) {
        case 1:
         return somecomponent;
        case 2:
         return someother;
        default:
         return defaultcomponent;
       }  
      }
       return renderActive();
    }
     class App extends Component {
      render() {
       <React.Fragment>
        <LeftDashboard />
        <RightDashboard activeParam={//pass active param} />
       </React.Fragment> 
      }
     }
    
    

    또 다른 옵션은 경로를 올바른 대시 보드 구성 요소에 배치하는 것입니다 :-

    const RightDashboard = () => {
       return (
        <React.Fragment>
         <Route path="/somepath" component={<Mycomponent />} />
         <Route path="/someotherpath" component={<Myothercomponent />} />
        </React.Fragment>
       )
    }
    
    

    나머지 구조는 위와 동일하게 유지됩니다.

관련 자료

  • 이전 angular - ngx-mapboxgl 거리 맵에 위성 레이어 추가
  • 다음 c - char 배열에서 공백 제거