переход к другому компоненту в том же макете страницы

Question

У меня есть список данных, которые я отображаю, используя карту в левой части экрана, после нажатия на кнопку, новый компонент должен отображаться в правой части того же экрана, а также URL должен меняться в браузер, думал использовать onClick вместо Link to, но если он используется, то не может указать изменение 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>
);
}

Answer 1

React router v4 использует динамическую маршрутизацию, т. Е. Ваш новый компонент может отображаться, если местоположение соответствует правильному маршруту.

Чтобы достичь того, что вы хотите, вы можете добавить маршрут с указанным путем ссылки, который будет отображать новый компонент.

В вашем коде просто внесите изменения в следующую строку: -

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

Answer 2

Вы можете использовать onClick, но тогда вам придется использовать объект истории, предоставленный библиотекой реагирующего маршрутизатора.Это будет выглядеть так: -

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

Для доступа к истории вам нужно будет импортировать withRouter 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>
   )

}

И остальная часть структуры останется такой же, как указано выше.