App.js

import React, { Component } from 'react';
import './App.css';
import TopMenu from './components/TopMenu';
import PublicPage from './components/PublicPage';
import PrivatePage from './components/PrivatePage';
import UserManagement from './components/UserManagement';
import CreateNewUserForm from './components/CreateNewUser';
import { connect } from 'react-redux';
import { Routes, Route, Navigate } from 'react-router-dom';
import EditUser from './components/EditUser';


const mapStateToProps = state => {
  return state
}

class App extends Component {
  render() {
    const user = this.props.user
    let workspace;

    if (user) {
      workspace =
        <Routes>
          <Route path="/" element={<PrivatePage />}></Route>
          <Route exact path="/userManagement" element={<UserManagement />}></Route>
          <Route path='/createNewUserForm' element={<CreateNewUserForm />}></Route>
          <Route path='/editUserForm' element={<EditUser />}></Route>
          <Route path='*' element={<Navigate to="/" />}></Route>
        </Routes>
    } else {
      workspace =
        <Routes>
          <Route path="/" element={<PublicPage />}></Route>
          <Route path='*' element={<Navigate to="/" />}></Route>
        </Routes>
    }

    return (
      <div className="App">
        <TopMenu />
        {workspace}
      </div>
    );
  }
}


export default connect(mapStateToProps)(App);