使用React Router通过边栏导航动态呈现组件的更简单方法

Question

当前正在本教程中学习如何使用React Router https://reacttraining.com/react-router/web/example/sidebar创建侧边栏导航系统我计划有多个路由，所以这意味着我必须继续导入路由并将其添加到routes阵列中。是否有一种聪明/正确的方式来动态加载它们？我所有的组件都在我的/Views文件夹中。App.jsimport React, { Component } from 'react';import SideBar from './components/SideBar/SideBar';import MainContent from './components/MainContent/MainContent';import { BrowserRouter as Router,} from 'react-router-dom';// Import all components hereimport Button from './components/Views/Button/Button';import Color from './components/Views/Color/Color';import Card from './components/Views/Card/Card';import Filter from './components/Views/Filter/Filter';const routes = [  {    path: "/",    name: 'home',    exact: true,    main: () => <h2>Home</h2>  },  {    path: "/button",    name: 'Button',    main: () =>  <Button />  },  {    path: "/color",    name: 'Color',    main: () =>  <Color />  },  {    path: "/card",    name: 'Card',    main: () =>  <Card />  },  {    path: "/filter",    name: 'Filter',    main: () =>  <Filter />  },];class App extends Component {  render() {    return (      <Router>        <div className="ds-container">          <SideBar routes={routes} />          <MainContent routes={routes} />        </div>      </Router>    );  }}export default App;

Answer 1

由于您使用的是内部使用webpack的create-react-app，因此可以查看require-context。这将帮助您动态导入与某个正则表达式匹配的文件夹中的所有文件。（例如：以.jsx / .js结尾）

但是，我建议您反对：

1. 您永远不会知道您目前正在适应的路线。

2. 这可能会降低代码的可读性。

3. 您可能还必须将组件的映射（path在Route中）连同组件本身一起导出。

为了避免所有这些情况，您可以index.js在Views组件中简单地创建一个文件，该文件将需要您创建的任何新的路由组件，并返回在App.js文件中形成的最终数组。

因此，本质上是/Views/index.js：

// Import all components here

import Button from './components/Views/Button/Button';

import Color from './components/Views/Color/Color';

import Card from './components/Views/Card/Card';

import Filter from './components/Views/Filter/Filter';

const routes = [

  {

    path: "/",

    name: 'home',

    exact: true,

    main: () => <h2>Home</h2>

  },

  {

    path: "/button",

    name: 'Button',

    main: () =>  <Button />

  },

  {

    path: "/color",

    name: 'Color',

    main: () =>  <Color />

  },

  {

    path: "/card",

    name: 'Card',

    main: () =>  <Card />

  },

  {

    path: "/filter",

    name: 'Filter',

    main: () =>  <Filter />

  },

  // add new routes here

];

export default routes;

在SideBar.js中：

import routes from 'path/to/views/Views';

//rest of your code to render the routes.

这样，您可以清理App.js中的代码，并且还可以有效地分离各个组件的问题。