2017-08-28 236 views
0

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

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

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

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

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

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

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

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')) 
+0

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

+0

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

+1

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

回答

0

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

+0

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