Я использую переводчик, чтобы задать вопрос, так как на русскоязычном сайте не жду помощи. Извините за мой 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
Буду очень признателен за вашу помощь ... Все что можно уже перепробовал.