Как разделить маршруты к конкретному файлу

Question

Я пробую отдельные маршруты к конкретному файлу в реагирующем маршрутизаторе.когда я пытаюсь console.log (маршруты);Компонент идет как неопределенный

rout.js: -

import { App } from "./components/app";
import React, { Component } from 'react';
export const routes = [
    {
      component: App,
      path: '/',
    }
  ];

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import App from './components/app';
import reducers from './reducers';
import { routes } from "./routes";
const createStoreWithMiddleware = applyMiddleware()(createStore);
debugger;
ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router routes={routes}>
      <div>
        <Switch>

        {routes.map(props => <Route {...props} />)}

        </Switch>
      </div>
    </Router>
  </Provider>
  , document.querySelector('.container'));

Answer 1

Могу поспорить, что вы экспортируете свой App компонент как default, однако вы импортируете, используя

import { App } from "./components/app";

Вы должны изменить (в routes.js) его на:

import App from "./components/app";

Вы использовали именованный импорт.