react-router v4を使用したサーバー側ルーティング

Question

ご存知のように、react-routerはv4にアップデートされ、多くの思考や構文が変更されました。手動でルートにアクセスしようとすると、エラーCannot Get/が返されますが、#を追加すると動作します。私はエクスプレスjsでルートに行くことができるように探しています。ありがとうございました！

ここではコードの一部が

class App extends React.Component { 
    render() { 
    return (
     <BrowserRouter> 
     <div> 
      <nav> 
      <div className="nav-wrapper"> 
       <a href="#" className="brand-logo">Logo</a> 
       <ul id="nav-mobile" className="right hide-on-med-and-down"> 
       <li><Link to="/">Home</Link></li> 
       <li><Link to="/login">Login</Link></li> 
       <li><Link to="/register">Register</Link></li> 
       </ul> 
      </div> 
      </nav> 
      <Match exactly pattern="/" component={Home} /> 
      <Match pattern="/login" component={Login} /> 
      <Match pattern="/register" component={Register} /> 

      <Miss component={NoMatch}/> 
     </div> 
     </BrowserRouter> 
    ) 
    } 
} 

Answer 1

の予想としては、サーバー上のルートを扱う？反応と反応し、ルータを動作させるにはどうすればよいあなたは、少なくとも二つのことを確認する必要があります（と特定の順序で！）：

1. 静的ファイルサービスミドルウェアが正しく構成され、エクスプレスアプリにマウントされています。

2. キャッチオールルートハンドラは、常に最初のアプリケーションバンドル（通常はindex.htmlとアプリケーションスクリプト）を処理します。たとえば ： //app is the express application instance //setup static file handling with express.static middleware app.use('/', express.static('path_to_your_static_files')); // //this will match all routes app.get('/*', (req,res) => { //serve your app here.... });

あなたの静的なミドルウェアによって処理されていないすべての要求は最終的にちょうどあなたが正しいorder.Withで上記の例をマウントすることを確認し、このハンドラにそれを作るだろう、あなたは「すべてのもの手動で入力するとサーバーからの応答が得られますので、クライアントルーターから404などの特別なケースを処理してください