Question

问题

使用react，react-router V4和webpack构建我的生产项目时，＆＃34; Switch＆＃34;没有渲染任何匹配的路线。但它适用于开发环境。

我尝试了什么

我在这里使用了样板文件：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类似的问题（显然更多地与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>

React router V4 - Switch无法在生产中渲染

问题

我尝试了什么

我的研究

1 个答案: