Правильно ли осуществлять роутинг в React через if (switch)?

Question

[volucris1]

switch (document.location.pathname) {
  case '/': {
    ReactDOM.render(
        <Index />,
        document.getElementById('root'),
    );
    break;
  }
  default: {
    ReactDOM.render(
        <h1>Error</h1>,
        document.getElementById('root'),
    );
  }
}

Стоит ли так делать? Просто vite отказывается работать с react-route-dom

Comments

[mexvod]

А что вы тем самым пытаетесь решить? Если почитать документацию к react то реакт роут сам разрезолвит маршрут и поймет куда идти, в чем смысл имеено этого решения?

[mexvod]

Я понял, вы делаете без reactrouter поэтому думаете как сделать. Лучше сделать на reactrouter. Тогда вам не придется думать об этом.

Answer 1

[mexvod]

Если я правильно понял то чего вы хотите, то есть сделать страницу обработки если роут не найден, то это делается не так. Используйте готовую библиотеку reactrouter. Для начало определите компонент и маршрут path="*" для страницы 404. Ваше решение находится здесь https://reactrouter.com/web/example/no-match

Забыл упомянуть , а вы пробовали https://github.com/vitejs/vite-plugin-react-pages ?

Answer 2

[vıtalıyırtlach]

Ответ нет! Так как при каждом пути React будет отрисовывать все заново! И это будет затратно! сделайте лучше в App.js(x)

import React from "react"

function App(props) {
// при изменении путя работает только с путем #
window.onhashchange = () => {
switch (document.location.pathname) {
  case '/': {
    return <Index />
  }
  default: {
        return <h1>Error</h1>
  }
}
}
}

export default App

и в index.js(x)

import App from "path/to/App.js(x)"
 ReactDOM.render(
        <App />
        document.getElementById('root'),
    );

но вообще используйте react-router-dom

Ссылки:
https://developer.mozilla.org/ru/docs/Web/API/Wind...
https://reactrouter.com/web/guides/quick-start

Comments

[volucris1]

Получается, мы ловим изменение пути и вешаем за место перехода на другую страницу, рендерим отдельный элемент, так?

[vıtalıyırtlach]

Вроде так:
1) Ловим изменение пути
2) Проверяем
3) Рендерим нужный елемент а не весь DOM