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則很簡單：

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>