NoMatch的反應路由器

Question

我想處理的情況下，用戶正在寫一個不存在的路徑。例如 - 如果用戶點擊Will Not Match鏈接，那麼NoMatch組件按預期呈現。

但是，如果用戶轉到url並將其更改爲「/ abcd」，則會向服務器發送GET請求並返回錯誤，因此沒有使用反應路由器。我怎樣才能讓NoMatch組件在這種情況下呈現？

我正在使用react-router v4，順便說一句。

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組件。