React роутер 4 вложенных маршрутов не работает

Question

Я пытаюсь создать вложенный маршрут - когда пользователь входит в систему, он открывает панель мониторинга, а когда панель открывается, я хочу создать вложенный маршрут, создав боковое меню и изменив содержимое справа, но не в состоянии это сделать. Когда я пытаюсь получить доступ к странице поста на панели инструментов, она не открывается.

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../_actions';
import { PostPage } from './PostPage';
import { HomePage } from '../HomePage';

class DashboardPage extends React.Component {
  render() {
    const { url } = this.props;
    return (
      <div>
        <h1>BasicRouting</h1>
        <p>With the help of "Match" Component we can specify the Component we want to render for a particular pattern of the App location/window.pathname.</p>
        <p>Select a level from Left Navigation to view the content, also notice the change in URL.</p>
        <div className="rightContent">
          <p>Second Level Content will appear here:</p>
          <Route path={`${this.props.match.url}/post`} component={PostPage} />
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  console.log(state)
  return {
      isLoggedIn: state
  };
}

const connectedDashboardPage = connect(mapStateToProps)(DashboardPage);
export { connectedDashboardPage as DashboardPage };

Answer 1

В вашем коде есть несколько проблем.

1. Вы импортируете {Switch ...} из реагирующего маршрутизатора-dom, но впоследствии никогда не использовали его.

2. Если вы хотите вызвать маршрут в вышестоящих / родительских компонентах, вам нужно импортировать {withRouter}, чтобы обернуть подключенный класс с избыточностью, что-то вроде

   const connectedDashboardPage = connect(mapStateToProps)(DashboardPage);
   const withRouterConnectedDashboardPage = 
   withRouter(connectedDashboardPage);
   export default withRouterConnectedDashboardPage;
   

Последнее предложение, прочитайте руководство здесь: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf & всегда обращайтесь к: https://reacttraining.com/react-router/