React router V4 - 在生产中切换不渲染

Question

问题

在使用 react、react-router V4 和 webpack 构建我的生产项目时，“Switch”没有呈现任何匹配的路由。但它适用于开发环境。

我尝试过的

我在这里使用了样板：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 很简单：

应用程序.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;

关于.js

import React from 'react';

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

export default About;

我的研究

我经历了很多 stackoverflow 的类似问题（显然与 react-router-redux 更相关），但目前我没有得到有效的答案。

我尝试使用不同的 webpack 配置来实现应用程序，例如使用 react-create-app repo 的配置。

我不确定它是否与最新版本的 react-router 或我的 webpack 配置有关。

这听起来像是一个愚蠢而简单的问题，但我在网络上的任何地方都找不到答案。

所以我的问题是，如何让开关组件匹配正确的路径？

Answer 1

我最近遇到了类似的问题，并通过将所有请求解析回我的 .htaccess 文件中的 index.html 来解决它。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>