Могу ли я использовать Switch от Re-router-DOM в компоненте? - PullRequest
Новая
       21

Могу ли я использовать Switch от Re-router-DOM в компоненте?

1 голос
/ 14 марта 2019

Я хочу спросить, могу ли я использовать Switch from response-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;

и чтобы быть ясным, я использую этот компонент HomePage в моем личном маршруте в моем приложении. 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')
);
...