react路由器：客戶端路由與服務器端路由

我正在使用react路由器。我創建了一個簡單的應用程序使用它。react路由器：客戶端路由與服務器端路由

https://react-04-router.herokuapp.com/

如果公司簡介或聯繫我們，網址點擊正在發生變化，正在顯示新內容。一切工作都很好，直到這一點。

但是，如果我刷新新鏈接https://react-04-router.herokuapp.com/aboutus。它顯示錯誤頁面爲「未找到」。

我不配置在服務器端/關於我們的路線，我想這是錯誤來了「未找到」的原因，但這個讓我不知道下面

如果客戶端路由不能支持刷新時，是否不會影響用戶體驗？
爲了避免對用戶體驗的影響，如果我決定使用服務器端，我知道我會失去更快的客戶端路由響應，除此之外，如果我不使用客戶端路由，有什麼可能會漏掉。

這裏是我的路由器文件代碼：

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

import AboutUs from '../presentation/AboutUs'; 
import ContactUs from '../presentation/ContactUs'; 
import Home from '../presentation/Home'; 
import Navbar from '../presentation/Navbar'; 

class MainLayout extends Component { 
    render(){ 
    return(
     <div > 
      <Navbar/> 
      <Switch> 
      <Route exact path='/' component={Home}/> 
      <Route path='/aboutus' component={AboutUs}/> 
      <Route path='/contactus' component={ContactUs}/> 
      </Switch>    
     </div>  
    ) 
    } 
} 

export default MainLayout

在此可以使

import React, { Component } from 'react' 
import ReactDOM from 'react-dom' 
import { BrowserRouter } from 'react-router-dom' 

import Header from './presentation/Header'; 
import Footer from './presentation/Footer'; 
import MainLayout from './layout/MainLayout' 

class App extends Component { 
    render(){ 
     return(
      <div className="container-fluid"> 
       <Header /> 
        <MainLayout/> 
       <Footer /> 
      </div> 
      ) 
    } 
} 


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

來源

2017-08-28 Conquistador

需要看看你如何實現'react-router'。請包括一些代碼 –

@EdgarHenriquez感謝您的回覆。我添加了路由器代碼。請讓我知道是否需要任何進一步的代碼。 – Conquistador

您不必處理後端中的每條特定路由，但是您需要全部捕獲，以便如果它們向服務器發送未明確定義的路由的請求，則可以將index.html發送回並讓前端路由器將它們帶到他們想要的頁面。看看我在這個問題上的答案瞭解更多細節和代碼修復示例：https://stackoverflow.com/questions/45030285/react-router-v4-page-refresh-not-working/45030808#45030808 – Jayce444

我想在這種情況下使用HashRouter建議app.js文件，請參閱Hash Router here

來源

2017-08-28 05:22:55

但是，根據我的最佳知識，散列路由器適用於靜態頁面，而不適用於動態內容 – Conquistador

react路由器：客戶端路由與服務器端路由

回答

相關問題