reactjs - Want to pass multiple components in react route router

Question

want to pass multiple components in react route method as

common page is used in both admin and common user.

i want a proper way to pass multiple components in the route as

i have done it but it is not a proper way.please have a look you might find a solution to this..

import { Router, Route } from 'react-router-dom';
import { connect } from 'react-redux';

import { history } from '../_helpers';
import { alertActions } from '../_actions';
import { PrivateRoute } from '../_components';
import { HomePage } from '../HomePage';
import { HomePageAdmin } from '../HomePage/HomePageAdmin';
import { CommonPage } from '../HomePage/CommonPage';
import { LoginPage } from '../LoginPage';
//import {WelcomePage} from "../WelcomePage"

class App extends React.Component {
    constructor(props) {
        super(props);

        const { dispatch } = this.props;
        history.listen((location, action) => {
            // clear alert on location change
            dispatch(alertActions.clear());
        });
    }

    render() {
        const { alert } = this.props;
        return (
           <div className="jumbotron">
                <div className="container">
                    <div className="col-sm-8 col-sm-offset-2">
                        {alert.message &&
                            <div className={`alert ${alert.type}`}>{alert.message}</div>
                        }
                        <Router history={history}>
                            <div>
                                 <Route exact path="/" component={LoginPage} />
                                <PrivateRoute exact path="/Home" component={HomePage} />
                                <PrivateRoute exact path="/Home" component={CommonPage} />
                                <PrivateRoute path="/HomePageAdmin" component={HomePageAdmin} />
                                <PrivateRoute path="/HomePageAdmin" component={CommonPage} />
                                <Route exact path="/login" component={LoginPage} />
                            </div>
                        </Router>
                    </div>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    const { alert } = state;
    return {
        alert
    };
}

const connectedApp = connect(mapStateToProps)(App);
export { connectedApp as App }; ```

question from:https://stackoverflow.com/questions/65846996/want-to-pass-multiple-components-in-react-route-router

Answer 1

Waitting for answers