首页 文章

React Router - 来自单独文件的路由

提问于
浏览 次
0

我正在构建小型 SPA Web 应用程序，具有反应，反应路由器和语义。当我决定将我的路线从 main .jsx 移动到单独的文件时出现问题。我想创建类似于这个的东西，理论上一切都运行良好，但路线中的组件是“未定义的”。

我的项目结构如下所示：

root
 |_ src
     |_ config
     |   |_ routes.js
     |   | ...
     |_ app
         |_ index.jsx
         | ...

routes.js：

import { Main, Add } from 'views';

export const routes = [
  {
    component: Main,
    path: '/',
  }, {
    component: Add,
    path: '/add',
  },
];

Index.jsx：

import React from 'react';
import ReactDOM from 'react-dom';

import { routes } from 'config';
import {
  BrowserRouter,
  Route,
  Switch,
} from 'react-router-dom';

export class Index extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          {routes.map(props => <Route {...props} />)}
        </Switch>
      </BrowserRouter>
    );
  }
}

ReactDOM.render(<Index />, document.getElementById('app'));

当我把 console.log(routes)放到渲染中时，我得到了类似的东西：

[
  { component: undefined, path: "/" },
  { component: undefined, path: "/add" }
]

我不知道问题出在哪里。

javascript reactjs

1 回答

  • 0

    您在 routes.js 文件中导入的组件需要指定一个类似import { Main, Add } from '../views';的路径

    import { Main, Add } from 'path/to/views';

export const routes = [
  {
    component: Main,
    path: '/',
  }, {
    component: Add,
    path: '/add',
  },
];
    回复于

相关问题