#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 — это попробовать. Если вы попытаетесь и у вас все еще будут проблемы, я был бы рад взглянуть на это, но я не буду писать ваш код для вас