import React from 'react';
import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import { OPEN_FORM_NEW_TASK_CAPTION, OPEN_FORM_EDIT_TASK_CAPTION } from '../stores/const.js';
class MenuTask extends React.Component {
constructor(props) {
super(props);
this.state = {
TaskLists: this.props.stateTaskLists.TaskLists
}
}
UNSAFE_componentWillReceiveProps = (newProps) => {
this.setState({ TaskLists: newProps.stateTaskLists.TaskLists });
}
forTaskLists = () => {
let menulist = [];
for (let tasklistskey in this.state.TaskLists) {
menulist.push(
<li key={tasklistskey}>
<NavLink to={"/chapter/" + this.state.TaskLists[tasklistskey].url} exact className="PageLink" activeClassName="ActivePageLink" key={tasklistskey}> {this.state.TaskLists[tasklistskey].name}</NavLink>
</li>
)
}
return menulist;
}
render() {
return (
<React.Fragment>
{<li><NavLink to="/" exact className="PageLink" activeClassName="ActivePageLink" > Все </NavLink></li>}
{Object.keys(this.state.TaskLists).length > 0 && this.forTaskLists()}
</React.Fragment >
);
}
}
const mapStateToProps = function (state) {
return {
stateTaskLists: state.stateTaskLists,
};
};
export default connect(mapStateToProps)(MenuTask);import React from 'react';
import { NavLink } from 'react-router-dom';
class MenuPage extends React.Component
render() {
return (
<React.Fragment>
<li><NavLink to="/" exact className="PageLink" activeClassName="ActivePageLink"> Главная </NavLink></li>
<li> <NavLink to="/about" className="PageLink" activeClassName="ActivePageLink"> О компании</NavLink></li>
</React.Fragment>
);
}
}
export default MenuPage;<MenuPage /> <MenuTask /> <PageRouter /> ?"use strict";
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import api from '../api/api.js';
import PageRouter from '../components/PageRouter.js';
import MenuPage from '../components/MenuPage.js';
import MenuTask from '../components/MenuTask.js';
import FormTaskCaption from '../components/FormTaskCaption.js';
class TaskMain extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
}
}
loadTaskLists = () => {
api.getTask(this.props.dispatch);
}
componentWillMount = () => {
/*TaskListsActions.loadTaskList(this.props.params.id);*/
/* TasksActions.loadTasks(this.props.params.id);*/
}
componentDidMount = () => {
console.log("componentDidMount");
this.loadTaskLists();
}
render() {
console.log("render TaskMains");
return (
<BrowserRouter history={this.props.history}>
<div className="container">
<h1> TASK APP</h1>
<div className="task-app-content">
<aside>
<h1> TASK </h1>
<div className="main-menu">
<ul className="menu-page">
<MenuPage />
</ul>
<p className="main-menu__title">Task Lists</p>
<ul className="menu-task">
<MenuTask />
</ul>
</div>
</aside>
<section>
TYT PageRouter !!!!!!!!!!
<PageRouter />
</section>
</div>
<FormTaskCaption />
</div>
</BrowserRouter>
);
}
};
const mapStateToProps = function (state) {
return {
stateTaskLists: state.stateTaskLists,
};
};
export default connect(mapStateToProps)(TaskMain);import React from 'react';
import { Route, Switch } from 'react-router-dom';
import AboutPage from '../page/AboutPage';
import TaskChapter from '../components/TaskChapter';
import NoMatch from '../page/NoMatch';
/* Route path="/client/:clid" component={Page_Client} */
class PageRouter extends React.Component {
render() {
return (
<div>
<Switch>
<Route path="/" exact component={TaskChapter} />
<Route path="/about" exact component={AboutPage} />
<Route path="/chapter/:chapter" component={TaskChapter} />
<Route path="*" component={NoMatch} />
</Switch>
</div>
);
}
}
export default PageRouter;<NavLink to={"/chapter/" + this.state.TaskLists[tasklistskey].url} exact className="PageLink" activeClassName="ActivePageLink" key={tasklistskey}>
{this.folder()} {this.state.TaskLists[tasklistskey].name}
/NavLink><Router history={this.props.history}>это url меняться ,компоненты для этого url не появляться это работает только при перезагрузке ,дальше кликаю на меню меняется url в строке браузера ,а разделя для этого url не видно остается старый раздел 
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
import { getStorage } from "firebase/storage";
import { getDatabase, ref, set, get, child, push, update, remove, query, onValue, runTransaction, onChildChanged } from "firebase/database";
вот тут что-то есть supasate/connected-react-router Synchronize React Router 4 state with your Redux store.