react-router-dom BrowserRouter在編譯後不工作

這是我第一次嘗試做出反應。我使用create-react-app創建項目，然後進行路由，我使用React Router V4進行web react-router-dom。react-router-dom BrowserRouter在編譯後不工作

這是我index.js文件

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter as Router } from 'react-router-dom'; 
import App from './App'; 
import './index.css'; 

ReactDOM.render(
    <Router> 
    <App /> 
    </Router>, 
    document.getElementById('root') 
);

當我啓動服務器npm start有沒有問題。但是當我用npm run build構建應用程序時，將其放入我的Apache服務器的www文件夾中並訪問它，我只在root div的內部得到的空白頁面。

<div id="root"> 
    <!-- react-empty: 1 --> 
</div>

我試圖尋找類似的情況，但答案總是關於webpack.config.js或一飲而盡添加historyApiFallback，我不能在create-react-app模板任何地方。

我試過HashRouter，它工作正常，但有/#/在URL是不受歡迎的。

我在構建應用程序後如何讓BrowserRouter工作？

來源

2017-08-29 Fadel Trivandi Dipantara

你可以分享github回購？這是檢查代碼的唯一方法。從來沒有與創建反應應用程序和反應路由器v4這個問題，所以一定有什麼問題在你身邊。 – Win

對不起，延遲迴復，這是我的github回購。 https://github.com/fadeltd/mall-app –

問題在於你如何爲頁面提供服務。如果你用'localhost/myproject'來訪問它。那麼它會假設路由需要渲染的將是具有'myproject'路徑的路由，所以如果是這種情況，則添加前綴 –

好吧，根本沒有問題。它的工作，即使它使用npm run build建成。我最好的猜測是：你把文件放在錯誤的文件夾中。

當您使用npm run build構建代碼時，static文件夾應放置在MallApp文件夾中。所以，你的文件夾結構應該是這樣的：

/var/www/mywebfolder/index.html 
/var/www/mywebfolder/MallApp/static

檢查瀏覽器的控制檯，我相信它包含錯誤。無法獲取js和css文件。

來源

2017-08-31 11:46:42 Win

nope。一切都很好。控制檯爲空。 https://www.dropbox.com/sh/2anki8hncblooq6/AACySxivCMakTdH5-SW8KRQ3a –

只有一種可能性：您的瀏覽器具有HTML5歷史API問題。因爲BrowserRouter需要它。至於你關於webpack配置的問題，你需要運行'npm run eject'。它會將所有配置文件「提取」到您的項目文件夾中。儘管這是一種單向操作，所以如果你不懂如何使用babel，webpack，lint等等，不要這樣做。 – Win

react-router-dom BrowserRouter在編譯後不工作

回答

相關問題