Хотите передать несколько компонентов в маршрутизаторе маршрутов react

#reactjs #redux #react-redux #react-router #react-router-redux

#reactjs #redux #react-redux #react-router #react-router-redux

Вопрос:

хотите передать несколько компонентов в методе маршрута реакции как

общая страница используется как для администратора, так и для обычного пользователя.

мне нужен правильный способ передачи нескольких компонентов в маршруте как

я сделал это, но это неправильный способ. пожалуйста, посмотрите, возможно, вы найдете решение этой проблемы..

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

Комментарии:

1. Вам нужно будет выбрать другой способ передачи дочерних элементов маршрута , кроме component prop. Вы могли бы использовать render и передать ему функцию с несколькими дочерними элементами, или я бы предложил просто вложить их в окружающий Route тег. Это также то, что предлагает react-router. Ниже приведен пример кода, в Switch котором показаны примеры этого метода

2. исправите ли вы этот код, поскольку я не могу понять и новичок в react

3. Нет. Лучший способ изучить react и react-router — это попробовать. Если вы попытаетесь и у вас все еще будут проблемы, я был бы рад взглянуть на это, но я не буду писать ваш код для вас