Страница постоянно перерисовывается при переключении между Next. js / Redux страниц - PullRequest
0 голосов
/ 20 июня 2020

Я использую переводчик, чтобы задать вопрос, так как на русскоязычном сайте не жду помощи. Извините за мой engli sh.

У меня возникла проблема в том, что нужно было использовать Redux. Я переделал свой HO C и Layout для него. но теперь, когда вы перемещаетесь по страницам, вся область перерисовывается.

HO C:

import Router from 'next/router'
import { connect } from 'react-redux';
import React, { Component } from 'react'
import { getAccount as getAccountAction } from 'actions/auth'

export default function (Component) {
    class middleware extends Component.WrappedComponent {

        constructor(props) {
            super(props)

            this.state = {
                token: '',
                check: false
            }
        }

        async componentDidMount() {

            const { getAccount } = this.props

            let my_token = this.props.token ? this.props.token : localStorage.getItem('token');
            await getAccount(my_token) // Get all user information
            if(this.props.isAuth && this.props.profile.role == "admin"){
                this.setState({ check: true });
            }
            else {
                Router.replace('/admin/login')
            }
        }

        render() {
            const { check } = this.state;

            if (check) {
                return (
                    <Component {...this.props} />
                )
            } else { return (<div></div>) }
        }
    }

    const mapState = state => ({
        token: state.auth.token,
        isAuth: state.auth.isAuth,
        profile: state.auth.profile
    })
    const mapDispatch = dispatch => ({
        getAccount: (token) => dispatch(getAccountAction(token))
    })

    return connect(mapState, mapDispatch)(middleware);
}

Макет:

import { setAdminMenu as setAdminMenuAction } from 'actions/ui'
import styles from './adminLayout.module.css'
import Link from 'next/link'
import { connect } from 'react-redux';
import React, { Component } from 'react'

export default function (Component) {
    class adminLayout extends Component.WrappedComponent {

        constructor(props) {
            super(props)

            this.state = {
                isLoaded: false,
            }
        }

        async componentDidMount() {
            const { setMenu } = this.props
            if (this.props.menu != []) {
                await setMenu(this.props.token); // function to get a list of categories for a menu
                this.setState({isLoaded: true})
            }
        }

        render() {
            let { isLoaded } = this.state
            let url = "/admin/panel/"

            if (!isLoaded) {
                return (
                    <div> </div>
                )
            }
            else {
                let item_menu = this.props.menu.reduce((res, item) => {
                    if (res.hasOwnProperty(item.category)) res[item.category].push(item);
                    else res[item.category] = [item];
                    return res;
                }, {});
                let res = Object.keys(item_menu)
                return (
                    <div id={styles.workspace} >
                        <div id={styles.header}></div>
                        <div id={styles.article}>

                                <Component {...this.props} />

                        </div>
                        <div id={styles.menu}>
                            {res.map((key, index) => (<ul key={`group_admin_menu_` + index}>
                                {item_menu[key].map(i => (
                                    <li key={`item_admin_menu_` + i.id}><Link href={"", url + i.directory}><a>{i.name}</a></Link></li>
                                ))}</ul>))}
                            <ul>
                                <li><Link href={"", url + 'settings'}><a>Настройки</a></Link></li>
                            </ul>
                        </div>
                        <div id={styles.footer}></div>
                    </div >)
            }
        }
    }

    const mapState = state => ({
        token: state.auth.token,
        menu: state.ui.AdminAPP.Menu,
    })
    const mapDispatch = dispatch => ({
        setMenu: (token) => dispatch(setAdminMenuAction(token))
    })

    return connect(mapState, mapDispatch)(adminLayout);
}

Пример страницы :

import React, { Component } from 'react'
import Router from 'next/router'

import withAdmin from 'middleware/test_withAdmin'
import Layout from 'middleware/layout/adminLayout'
import { connect } from 'react-redux';

import { setAdminMenu as setAdminMenuAction } from 'actions/ui';

class Panel extends Component {
    async componentDidMount() {

    }
    render() {
        return (
            <div><h1>Statistic</h1></div>
        )
    }
}

const mapState = state => ({
    token: state.auth.token,
    menu: state.ui.AdminAPP.Menu,
})
const mapDispatch = dispatch => ({
    setMenu: (token) => dispatch(setAdminMenuAction(token))
})

export default withAdmin(Layout(connect(mapState, mapDispatch)(Panel)))

//withAdmin - HOC

Буду очень признателен за вашу помощь ... Все что можно уже перепробовал.

1 Ответ

1 голос
/ 20 июня 2020

У меня была аналогичная проблема, части "макета" были повторно обработаны, потому что это часть страницы Next. js.

Next. js, на навигация по страницам отключает текущую страницу и отображает новую страницу, если ваш макет является частью страницы, которая была повторно отрисована.

Я решил это, переместив компонент макета в компонент pages/_app, который является компонент root вашего приложения и не монтируется повторно при навигации по страницам.

Для получения дополнительной информации вы можете прочитать это сообщение в блоге

...