Более простой способ динамического рендеринга компонентов с боковой навигацией с использованием реагирующего маршрутизатора.

Question

В настоящее время мы изучаем это руководство по созданию боковой навигационной системы с реагирующим маршрутизатором. https://reacttraining.com/react-router/web/example/sidebar

Я планирую использовать несколько маршрутов, поэтому мне придется продолжать импортировать маршруты и добавлять их вмассив routes.Есть ли умный / правильный способ их динамической загрузки?

Все мои компоненты будут в моей папке /Views.

App.js

import 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 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 />
  },
];

class App extends Component {
  render() {
    return (
      <Router>
        <div className="ds-container">
          <SideBar routes={routes} />
          <MainContent routes={routes} />
        </div>
      </Router>
    );
  }
}

export default App;

Answer 1

Поскольку вы используете приложение create-реакции-приложение, которое внутренне использует веб-пакет, вы можете заглянуть в require-context. Это поможет вам динамически импортировать все файлы в папке, которые соответствуют определенному регулярному выражению. (например, заканчивающийся на .jsx / .js)

Однако я бы посоветовал вам против этого:

1. Ни в коем случае вы не будете знать, какие маршруты вы обслуживаете в настоящее время.
2. Это может снизить читабельность кода.
3. Возможно, вам также придется экспортировать сопоставление (path в маршруте) компонента вместе с самим компонентом.

Чтобы избежать всего этого, вы можете просто создать файл 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;

In SideBar.js :

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

//rest of your code to render the routes.

Таким образом, вы очистите код в своем App.js, а также сможете эффективно разделить проблемы отдельных компонентов.

Надеюсь, это имеет смысл:)

Answer 2

Существует несколько способов выбора основного компонента в зависимости от текущего местоположения. Но все они потребуют перечисления всех возможных маршрутов и импорта соответствующих компонентов. Вы можете использовать динамический импорт и React.lazy для упрощения разделения кода.

Но вы можете избежать дополнительной настройки для своей боковой панели. Боковая панель может получить конфигурацию из глобального состояния, и ваши основные компоненты могут обновить это состояние при монтировании (componentDidMount или useEffect(() => {...}, [])):

const SideBarContext = React.createContext(() => {});

function useSidebar(name) {
  const setSidebarName = useContext(SideBarContext);
  useEffect(() => {
    setSidebarName(name);
    return () => setSidebarName(null);
  }, []);
}

function Home() {
  useSidebar('home');
  return <h2>Home</h2>;
}

function Button() {
  useSidebar('Button');
  return <button>press me</button>;
}

function App() {
  const [name, setName] = useState(null);

  return (
      <Router>
        <div className="ds-container">
          <SideBar name={name} />
          <SideBarContext.Provider value={setName}>
            <Route path="/" exact component={Home}/>
            <Route path="/button" component={Button}/>
          </SideBarContext.Provider>
        </div>
      </Router>
  );
}

Таким образом, каждый компонент позаботится о параметрах боковой панели, и вам нужно только импортировать их и добавить Route s.