Когда я вхожу в свой React Router-dom , я указываю свои маршруты на страницу проверки. В случае если цель вошла в систему или нет, я пу sh мой маршрут (история) до необходимой страницы, но я продолжаю получать сообщение об ошибке.
Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, WrappedComponent, displayName}). If you meant to render a collection of children, use an array instead.
in Unknown (at RequiredAuth.js:34)
in RequireAuth (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in Route (at App.js:23)
in Switch (at App.js:18)
in Router (at App.js:17)
in div (at App.js:16)
in App (created by ConnectFunction)
in ConnectFunction (at Dashbord.js:14)
in div (at Dashbord.js:14)
in DashBoard (created by ConnectFunction)
in ConnectFunction (at src/index.js:10)
in Provider (at src/index.js:9)
Приложение. js
import React from 'react';
import { Router, Route, Redirect, Switch } from 'react-router-dom';
import { history } from './configureStore';
import { allRoutes } from './routes';
import NotFound from './pages/404';
import RequiredAuth from './components/RequiredAuth';
import NotRequiredAuth from './components/NotRequiredAuth';
import DashBoard from './pages/Dashbord';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
class App extends React.Component {
render() {
return (
<div style={{ height: '100%' }}>
<Router history={history}>
<Switch>
{allRoutes
.filter(route => route.visible)
.map((route, index) => {
return (
<Route
exact={route.exact}
path={route.path}
key={index}
component={RequiredAuth(route.component)}
/>
)
})}
<Route path={'/:404_path'} key={'404'} component={NotFound} />
<Redirect to="/dashboard" />
</Switch>
</Router>
</div>
);
}
}
App.displayName = 'App';
const mapDispatchToProps = dispatch => {
return bindActionCreators({ }, dispatch);
};
const mapStateToProps = state => {
return {
};
};
export default DashBoard(
connect(
mapStateToProps,
mapDispatchToProps
)(App)
);
RequiredAuth. js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';
import { history } from '../configureStore';
export default function (ComposedComponent) {
class Authentication extends Component {
constructor(props){
super(props);
this.props = props;
}
componentDidMount() {
const { auth } = this.props
if (!auth.success) {
history.push('/login');
}
}
componentDidUpdate() {
const { auth } = this.props
if (!auth.success) {
history.push('/login');
}
}
PropTypes = {
router: PropTypes.object
}
render() {
return <ComposedComponent {...this.props} />;
}
}
Authentication.propTypes = {
location: PropTypes.object
}
Authentication.displayName = 'RequireAuth'
function mapStateToProps(state) {
return { auth: state.auth };
}
const mapDispatchToProps = dispatch => bindActionCreators({ }, dispatch);
return connect(mapStateToProps, mapDispatchToProps)(Authentication);
}
Dashbord. js
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ShouldRender } from '../components/basic/ShouldRender';
export default function(ComposedComponent) {
class DashBoard extends Component {
render() {
const {auth} = this.props
if (!auth.success) return <div>{ComposedComponent && <ComposedComponent />}</div>;
return (
<div>
<ShouldRender if={!auth.success}>
{ComposedComponent && <ComposedComponent />}
</ShouldRender>
<ShouldRender if={auth.success}>
<div style={{ height: '100%' }}>
<div>
<div className='page-container'>
<main className='main-content bgc-grey-100'>
<div id='mainContent'>
<div className='row gap-20 masonry pos-r'>
<div className='masonry-item col-12'>
{ComposedComponent && <ComposedComponent />}
</div>
</div>
</div>
</main>
<footer className='bdT ta-c p-30 lh-0 fsz-sm c-grey-600'>
<span>
Copyright © {new Date().getFullYear()}{' '}
<a
href='https://dataintegrated.co.ke'
target='_blank'
title='Data Integrated'
>
Data Integrated Limited
</a>
. All rights reserved.
</span>
</footer>
</div>
</div>
</div>
</ShouldRender>
</div>
);
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ }, dispatch);
};
function mapStateToProps(state) {
return {
auth: state.auth
};
}
DashBoard.propTypes = {
};
return connect(mapStateToProps, mapDispatchToProps)(DashBoard);
}
пытался работать с HO C, реагировать на официальную страницу, но когда я реализую эту проверку, я всегда нахожу себя на этой ошибке, но когда я удаляю реализацию HO C, все отрисовывается отлично.