Почему не становятся ссылки активными при использовании connect(mapStateToProps)(TaskMain)?

Question

[sergeyviktorovich]

сделал вот так ,но теперь url меняется а компоенты этого url не подставляются ,что сделал не правильно?

import { routerReducer } from 'react-router-redux';

let combinedReducer = combineReducers({
  // редьюсер countersReducer отвечает за раздел state под именем counters
  stateTaskLists: TaskReducer,
  routing: routerReducer
  // + другие редьюсеры
});

export default combinedReducer;




import TaskMain from './page/MainPage.js';
import combinedReducer from "./stores/stores.js";
import { syncHistoryWithStore } from 'react-router-redux';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const store = createStore(combinedReducer);
export default store;
let history = syncHistoryWithStore(createBrowserHistory(), store);

ReactDOM.render(<Provider store={store}><Router history={history} ><TaskMain /></Router></Provider>, document.getElementById('root'));

потом переделал эту строку вот так

ReactDOM.render(<Provider store={store}><TaskMain history={history} /></Provider>, document.getElementById('root'));

пробовал так но BrowserRouter не поддерживает history <BrowserRouter history={this.props.history}>

а так меняться url , но компоненты не меняются <Router history={this.props.history}>

Comments

[Nikolay Matyushkin]

Я правильно понимаю: вы изменяете URL, но не видите изменений, т.к. не реагируют компоненты, заданные для каждого URL-a?

[sergeyviktorovich]

Devilz_1,
не работало сначала вот это activeClassName="ActivePageLink",не применялся

<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 не видно остается старый раздел

[Nikolay Matyushkin]

Ага, так. Я не вижу, где вы обозначили Switch с дочерними роутами

[sergeyviktorovich]

Devilz_1,

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;

[Nikolay Matyushkin]

компонент PageRouter должен быть обёрнут в Provider вместо TaskMain

[sergeyviktorovich]

Devilz_1, не совсем понял это главный фаил приложения , до этого все так работало ,в внутри его уже есть PageRouter

ReactDOM.render(, document.getElementById('root'));

"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);

[Nikolay Matyushkin]

Ну уже лучше.
Чтобы получить доступ к history можно просто обернуть компонент в withRouter. В вашем случае это компонент TaskMain

[sergeyviktorovich]

Devilz_1, когда я делаю так export default connect(mapStateToProps)(MenuTask); то и перестало все работать так как роутер и редакс не работаю вместе и не добавляет ссылкам класс ,что они активны ,для этого я качал библиотеку import { routerReducer } from 'react-router-redа почему его ?
я так оборачивал только меню
Чтобы получить доступ к history можно просто обернуть компонент в withRouter
имеете ввиду передать им пропсами history <MenuPage /> <MenuTask /> <PageRouter /> ?

вот мой проект
https://github.com/AnrikoTacatti/FD3-Pauls/tree/ma...

[Nikolay Matyushkin]

С чего бы это роутер и редакс не работают вместе?

export default connect(mapStateToProps)(withRouter(MenuTask));

А вообще вот наилегчайший шаблон того, что вы хотите получить.

[sergeyviktorovich]

Devilz_1, даже тут если сделаю не export default MenuPage; а export default connect(mapStateToProps)(MenuPage); активные ссылки перестанут подсвечиваться им класс activeClassName="ActivePageLink"
не будет добавляться

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;

[sergeyviktorovich]

Devilz_1, тут пишется так https://monsterlessons.com/project/lessons/reduxjs...
мы научились с вами использовать Redux для работы с состоянием приложения и React-router для роутинга. Это все хорошо, но они не работают вместе. Мы же хотим, чтобы роутер был частью redux store и мы могли пользоваться его данными и экшенами в обычном для redux way. В этом нам поможет библиотека react-router-redux. На сегодняшний день - это самая популярная библиотека для роутинга в redux.

[Nikolay Matyushkin]

sergeyviktorovich, что ж вы сразу не скинули ссылку на этот древний ресурс.
друг мой, последний коммит для этого курса был больше 4 лет назад. Там у них 15-ая версия реакта (сейчас 17, уже анонсировали 18 версию), реакт-роутер 3 версии (сейчас 5 уже)

Ознакомьтесь с песочницей, что я скинул вам выше. Там почти сэмулирована ваша ситуация

[sergeyviktorovich]

Devilz_1, все равно не понимаю что тут не так
у вас же ссылки не берутся из редакс в том примере

сам компонент вот так обвернул export default connect(mapStateToProps)(withRouter(TaskChapter));

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);

[Nikolay Matyushkin]

sergeyviktorovich,

import {withRouter} from 'react-router-dom';
   //.....
   //.....
   export default connect(mapStateToProps)(withRouter(MenuTask));

[sergeyviktorovich]

Devilz_1, сделал все равно так не работает, попробуйте в своем примере вывести ссылки из редакс

[sergeyviktorovich]

Devilz_1, https://redux.js.org/introduction/ecosystem#routing
вот тут что-то есть supasate/connected-react-router Synchronize React Router 4 state with your Redux store.

[Nikolay Matyushkin]

sergeyviktorovich,
вот ваш проект в песочнице, только нет firebase (я просто свой массив заметок подложил)

обратите внимание на основной index.js и компонент MainPage.js

надо было просто удалить старый хлам, который уже давно deprecated (о чём я вам говорил выше) в виде библиотеки react-router-redux

[sergeyviktorovich]

Devilz_1, у вас это работает потому что вы подтянули из стейта компонента линки ,а не из стейта редакс

this.state = {
      TaskLists: [
        {
          url: "zametki-home",
          name: "Zametki Home"
        },
        {
          url: "zametki-workl",
          name: "Zametki Work"
        },
        {
          url: "zametki-family",
          name: "Zametki Family"
        },
        {
          url: "privat-info",
          name: "Privat info"
        }
      ]
    };
  }

[Nikolay Matyushkin]

sergeyviktorovich, ознакомьтесь
выкинул в редакс

[sergeyviktorovich]

Devilz_1, залил правки на гит у меня не работает, что не доделал ?
может потому что стейт появляется на дид мант ?

[Nikolay Matyushkin]

sergeyviktorovich, обратите внимание, как экспортированы компоненты TaskMain и MenuTask в песочнице. Через константу. Я там экспортировал по дефолту, но вы так же как у себя можете экспортировать по дефолту, предварительно создав константу и экспортировав её по дефолту.

/*MenuTask*/
const MenuTaskConnected = connect(mapStateToProps)(MenuTask);
export default MenuTaskConnected;

/*TaskMain*/
const TaskMainConnected = connect(mapStateToProps)(TaskMain);
export default TaskMainConnected;

[sergeyviktorovich]

Devilz_1, я поправил в песочнице на экспорт дефаулт в песочнице работает ,а у меня нет,
но на локалке у меня не работает или у меня ошибка или дело в сервере ?

[sergeyviktorovich]

sergeyviktorovich, обновил пакеты заработало
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^5.3.0",
"redux": "^4.1.1"
было
"react-redux": "^7.2.5",
"react-router-dom": "^4.2.2",
как вы заливает https://codesandbox.io/ проекты ?

[Nikolay Matyushkin]

sergeyviktorovich, руками) Благо, codesandbox имеет автоформатирование кода

Answer 1

[Nikolay Matyushkin]

Ваш проект
1) Выпилен устаревший react-router-redаx
2) Изменено экспортирование компонентов MenuTask и TaskMain