react-router在頁面加載時沒有返回嵌套路由的內容

Question

無論是在使用應用導航菜單還是在瀏覽器中直接輸入url時，我的反應應用都可按照第一級路由（例如/,/foo,/bar）地址欄。

然而，更深的網址（如/foo/bar）僅在使用應用程序導航菜單時才起作用，但當url直接輸入到瀏覽器地址欄時不起作用。

對於depper URLs，當刷新頁面或直接在地址欄中輸入url時，會顯示站點index.html（因爲沒有加載內容或樣式，因此會出現白屏），但它似乎沒有被渲染因爲在控制檯中不存在錯誤，並且反應開發工具顯示空白屏幕。

我正在使用react-router 4.0.0和webpack-dev-server以及--history-api-fallback選項集。我嘗試切換服務器來表示並設置一個catch，將所有路由重定向到index.html，並將其降級到react-router 3.0.2，但問題在兩個實例中都存在。

我把我的代碼降到了最低限度，僅僅是路由器和一些我試圖路由到的裸骨組件。

應用程序入口點（index.js）

import React from 'react'; 
import { render } from 'react-dom'; 
import { BrowserRouter } from 'react-router-dom'; 

// import components 
import AppContainer from './components/AppContainer'; 

render(
    <LocaleProvider> 
     <BrowserRouter> 
      <AppContainer/> 
     </BrowserRouter> 
    </LocaleProvider>, 
    document.querySelector('#main') 
); 

AppContainer組件

import React from 'react'; 
import { Route, Switch, Link } from 'react-router-dom'; 

// import components 
import Home from './Home'; 
import About from './About'; 
import Test from './Test'; 
import NotFound from './NotFound'; 

class AppContainer extends React.Component { 
    render() { 
     return (
      <div> 
       <ul> 
        <li><Link to="/">Home</Link></li> 
        <li><Link to="/about">About</Link></li> 
        <li><Link to="/asdasdhuahfisd">404 Test</Link></li> 
        <li><Link to="/about/test">About/Test</Link></li> 
       </ul> 

       <Switch> 
        <Route path="/" exact component={Home} /> 
        <Route path="/about/test" component={Test} /> 
        <Route path="/about" component={About} /> 
        <Route component={NotFound} /> 
       </Switch> 
      </div> 
     ); 
    } 
} 

export default AppContainer; 

Answer 1

我設法縮小問題，我用注射一<script>標籤的生成html-webpack-plugin js文件進入應用程序的主體。腳本標記src被生成爲相對url src="main.js"，因此刷新深層網頁上的頁面將導致找不到javascript文件，因此反應應用程序未加載。

快速查看html-webpack-plugin代碼顯示，javascript文件的url是從webpack config變量output.publicPath生成的，我沒有在我的應用程序中設置它。將以下代碼添加到我的webpack.config.js解決了問題。

output: { 
    publicPath: '/' 
},