Блог

Главная - Вопросы по программированию - Могу ли я использовать коммутатор из reac-router-dom в компоненте?

Могу ли я использовать коммутатор из reac-router-dom в компоненте?

#reactjs #switch-statement #react-router-dom

#reactjs #switch-statement #react-router-dom

Вопрос:

я хочу спросить, могу ли я использовать Switch из react-router-dom в подобном компоненте? потому что я ничего не получаю 

 import React from 'react';
//import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { Router, Route, Switch } from "react-router-dom";
import { history } from '../_helpers'
import { userActions } from '../_actions';
import indexRoutes from "routes/index.jsx";

class HomePage extends React.Component {
    componentDidMount() {
        this.props.dispatch(userActions.getAll());
    }

    render() {
        const { user, users } = this.props;
        return (
            <Router history={history}>
    <Switch>
      {indexRoutes.map((prop, key) => {
        return <Route path={prop.path} key={key} component={prop.component} />;
      })}
    </Switch>
  </Router>
        );
    }
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>

и indexroutes имеют этот код 

 import Dashboard from "layouts/Dashboard/Dashboard.jsx";

var indexRoutes = [{ path: "/", name: "Home", component: Dashboard }];

export default indexRoutes;

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

  <Router history={history}>
                 <div>
                 <PrivateRoute exact path="/" component={HomePage} />
                 <Route path="/login" component={LoginPage} />
                 </div>
</Router>

и я вызываю свое приложение в index.js вот так : 

 import React from "react";
import ReactDOM from "react-dom";
import "bootstrap/dist/css/bootstrap.css";
import "assets/scss/paper-dashboard.scss";
import "assets/demo/demo.css";
import { Provider } from 'react-redux';
import { store } from './_helpers';
import { App } from './App';


ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

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

1. Можете ли вы попробовать добавить маршрут с указанием пути * ?

2. вы сказали, я ничего не получаю — вы имеете в виду, что когда вы переходите по пути ‘/’, вы не можете видеть компонент панели мониторинга?

3. @MohitTilwani да, я получаю маршрут к панели мониторинга, но я не вижу ни одного компонента

4. @LorenzHenk я добавляю этот маршрут в свой компонент домашней страницы?

5. Вы добавляете это в маршрутизатор в качестве последнего маршрута.