反応ルータのNoMatch

Question

私は、ユーザーが存在しないパスを記述している状況を処理しようとしています。たとえば、ユーザーがWill Not Matchリンクをクリックした場合は、NoMatchコンポーネントが期待通りにレンダリングされます。

ただし、ユーザーがURLにアクセスして「/ abcd」に変更すると、GETリクエストがサーバーに送信され、エラーが返されるため、反応ルータは使用されません。この場合でもNoMatchコンポーネントがレンダリングされるようにするにはどうすればよいですか？

私はreact-router v4、BTWを使用しています。

import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom' 

const NoMatch = ({ location }) => (
     <div> 
      <h3>No match for <code>{location.pathname}</code></h3> 
     </div> 
    ) 

class App extends React.Component { 
    render(){ 
     return (
      <Router> 
       <div> 
        <Link to="/page1">page1</Link> 
        <Link to="/page2">page2</Link> 
        <Link to="/will/not/match">Will Not Match</Link> 

        <Switch> 
        <Route exact path="/" component={Home}/> 
        <Route path="/page1" component={page1}/> 
        <Route path="/page2" component={page2}/> 
        <Route component={NoMatch}/> 
        </Switch> 
       </div> 
      </Router> 
     ) 
    } 
} 

Answer 1

通常、サーバー側の手動URL書き込みに対処する必要があります。ブラウザ側でこれを処理する方法はありません（少なくとも私が知っているわけではありません）。

だから、基本的な考え方は、常に呼び出さURL（あなたのAPIまたは何のためにいくつかの特別なルートを法）

だからあなたのユーザーが/abc

を要求したものは何でもあなたのアプリを返すために、サーバー側で、あります
• サーバはアプリケーションを返します（例えば、index.html）。
• ブラウザでJSアプリが読み込まれます。
• ルータはURLを読み取ります。
• NoMatchコンポーネントが表示されます。