Reagieren Router: clientseitige Routing vs serverseitige Routing

Question

Ich spiele mit Reagieren Router. Ich habe eine einfache App damit erstellt.

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

Wenn ein Klick auf aboutus oder contactus, URL ändert und neue Inhalte gezeigt wird. Bis hierhin läuft alles einwandfrei.

Aber wenn ich auf dem neuen Link https://react-04-router.herokuapp.com/aboutus aktualisieren. Es zeigt die Fehlerseite als "Nicht gefunden" an.

Ich habe nicht konfiguriert/aboutus Route auf der Serverseite und ich denke, dies ist der Grund „nicht gefunden“ Fehler kommt aber das macht mich frage mich, folgende

1. Wenn Client-Seite Routing nicht unterstützen kann würde es sich bei der Aktualisierung nicht auf die Benutzererfahrung auswirken?
2. Um Auswirkungen auf die Benutzererfahrung zu vermeiden, wenn ich beschließe, mit Serverseite zu gehen, weiß ich, dass ich schnellere Antwort von clientseitigem Routing verlieren würde, abgesehen davon, gibt es etwas, was ich verpassen könnte, wenn ich nicht clientseitiges Routing verwende .

Hier mein Router Datei-Code ist:

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 

Und hier ist app.js Datei, die

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

macht würde ich mit HashRouter in diesem Fall vorschlagen, siehe Hash Router here