反応ルータ：クライアント側ルーティングとサーバ側ルーティング

Question

私は反応ルータで遊んでいます。私はそれを使って簡単なアプリを作った。

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

弊社についてお問い合わせまたは、URLのワンクリックが変更され、新しいコンテンツが表示されている場合。この時点まですべてが完全に正常に機能しています。

ただし、新しいリンク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 

そして、ここで私はそのような場合にはHashRouterを使用することをお勧めし

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

Answer 1

をレンダリングapp.jsファイルは、参照Hash Router here