Question

我正在尝试在react-router-dom中单独路由到特定文件。当我尝试console.log（routes）;组件以未定义的形式出现

routes.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";

您使用的是命名导入。

如何分隔到特定文件的路由

1 个答案: