基本的なルータのテンプレートの例 - URLアクセスなし

Question

私はテンプレートセットアップの下で2つの簡単なルート、挨拶とサインアップを持つ反応ルータの基本的な例を設定しようとしています。現在、ロード時にエラーは発生しませんが、アドレスバーに入力して/signupルートにアクセスしようとすると、次のエラーが表示されます。Cannot GET /signupと理由を理解できません。

誰もがreact-router-dom v4でこの問題に遭遇しましたか？この問題を解決し、URL経由でさまざまなパスへのナビゲートを成功させる方法を提案していただきありがとうございます。

ビルドイン反応リンクコンポーネントを使用してこれらのURLパスにアクセスしようとすると、リンクが正常に機能しますが、URLでページを更新すると、再びCannot GET signupエラーが発生します。

app.js

import React from "react"; 
import NavigationBar from '../components/navigation-bar'; 

export class App extends React.Component { 
    render() { 
     return (
      <div className="container"> 
       <NavigationBar /> 
       {this.props.children} 
      </div> 
     ); 
    } 
} 

index.js

import React from 'react'; 
import ReactDOM from "react-dom"; 
import {Provider} from "react-redux"; 
import {createStore} from "redux"; 
import allReducers from "./reducers"; 

import {BrowserRouter as Router, Route, Switch} from "react-router-dom"; 
import {App} from "./components/app"; 
import {Greetings} from "./components/greetings"; 
import {Signup} from "./components/signup"; 


const store = createStore(allReducers); 

ReactDOM.render(
       <Provider store={store}> 
        <Router> 
         <App> 
          <Switch> 
           <Route exact path="/" component={Greetings} /> 
           <Route path="/signup" component={Signup} /> 
          </Switch> 
         </App> 
        </Router> 

       </Provider>, window.document.getElementById("app")); 

greetings.js

import React from "react"; 

export class Greetings extends React.Component { 
    render() { 
     return (
      <h2> 
       Greetings 
      </h2> 
     ); 
    } 
} 

signup.js

import React from "react"; 

    export class Signup extends React.Component { 
     render() { 
      return (
       <h2> 
        SIGN UP 
       </h2> 
      ); 
     } 
    } 

Answer 1

BrowserRouterウェブサーバーを使用するためには、実際のURLを処理する準備ができている必要があるため、HashRouterをBrowserRouter以上にしてみてください。

import {HashRouter as Router, Route, Switch} from "react-router-dom";