Want to pass multiple components in react route router

557 Views Asked by At

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 }; ```
0

There are 0 best solutions below