React router V4 - коммутатор не рендерит в производстве

1

проблема

При создании моего проекта для производства с реагированием, реагирования-маршрутизатора V4 и webpack, "коммутатор" не создает никаких соответствующих маршрутов. Но он работает в среде разработки.

Что я пробовал

Я использовал шаблон здесь: https://github.com/KleoPetroff/react-webpack-boilerplate

Мой Router.js просто:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import App from '../components/App';
import About from '../components/About';

const Root = () => {
return (
    <Router>
      <Switch>
        <Route path="/about" component={About} />
        <Route exact path="/" component={App} />
      </Switch>
    </Router>
);
};

export default Root;

А компоненты App.js и About.js просто:

App.js
import React from 'react';
import { Link } from 'react-router-dom';

const App = () => {
  return (
    <h2 id="heading">
      Hello ReactJS
      <Link to="/about">here</Link>
    </h2>
  );
};

export default App;
About.js
import React from 'react';

const About = () => {
  return (
    <h2 id="heading">
      About ReactJS
    </h2>
  );
};

export default About;

Мое исследование

Я столкнулся с большим количеством вопросов, связанных с stackoverflow (более связанных с реакцией-маршрутизатором-редукцией), но на данный момент у меня нет рабочих ответов.

Я попытался реализовать приложение, используя разные конфигурации webpack, например, с репо rep-create-create-app.

Я не уверен, связано ли это с последней версией реактивного маршрутизатора или с моей конфигурацией webpack.

Это звучит как глупая и легкая проблема, но я не могу найти ответы нигде в Интернете.

Итак, мой вопрос: как сделать компонент переключателя правильным?

  • 0
    что вы имеете в виду, не отображая ни одного подходящего маршрута? Вы получаете полностью белую страницу, или ваше приложение не отображает сам маршрут?
  • 0
    Вам может потребоваться настроить ваш веб-сервер (проверьте ответ ниже), или вы можете использовать «HashRouter» от реагирующего маршрутизатора. это не требует никакой конфигурации сервера.
Показать ещё 1 комментарий
Теги:
react-router
webpack

1 ответ

0
Лучший ответ

Недавно я столкнулся с подобной проблемой и разрешил ее, разрешив все запросы обратно к моему index.html в моем файле.htaccess.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
  • 0
    На самом деле я имею в виду это, но я думал, что он будет работать локально (благодаря webpack?) При запуске index.html в моей папке сборки. Мне нужно настроить сервер Apache, чтобы попробовать, если он работает с использованием файла .htaccess.
  • 0
    Я попытался настроить .htaccess для моего сервера apache, и, похоже, проблема уже исправлена. Я отмечу ответ как правильный.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню