陣營路由器交換機行爲

（react-router-dom版本：4.1.1）陣營路由器交換機行爲

我有工作設置了路線，但我有點困惑，爲什麼<Switch>是必要的：

index.js

import React from 'react'; 
import { HashRouter, Route, Switch } from 'react-router-dom'; 

import App from './components/App.jsx'; 
import FridgePage from './components/FridgePage.jsx'; 

ReactDOM.render(
    <HashRouter> 
     <Switch> 
      <Route exact path="/" component={App} /> 
      <Route path="/fridge" component={FridgePage} /> 
     </Switch> 
    </HashRouter>, 
    document.getElementById('root') 
)

App.jsx

import Header from './Header.jsx'; 
import {Link} from 'react-router-dom'; 

export default class App extends React.Component { 
    render() { 
     console.log(this.props); 
     return (
      <div> 
       <h1>Herbnew</h1> 
       <Link to="fridge">Fridge</Link> 
       {this.props.children} 
      </div> 
     ); 
    } 
}

FridgePage.jsx

import React from 'react'; 

export default class FridgePage extends React.Component { 
    render() { 
     return (
      <div> 
       <h1>Fridge</h1> 
       You finally found the fridge! 
      </div> 
     ); 
    } 
}

我曾經有一個div包裝路線，而不是Switch。在這種情況下，我看到App呈現並嘗試點擊冰箱鏈接，但沒有任何反應（FridgePage未呈現），並且沒有錯誤輸出到控制檯。

據我所知，Switch做的唯一的事情就是渲染它匹配的第一條路線，而忽略它的常見問題是一次渲染兩個頁面。如果我的"/"路線是準確的，那麼即使沒有開關，冰箱應該是唯一匹配的路線，對吧？爲什麼它根本不呈現？

來源

2017-07-15 Jess

我試着用Switch以及div標籤包裝路由來運行你的代碼。兩者都產生相同的預期結果（FridgePage獲得div以及Switch）。你能再次檢查一下嗎？

來源

2017-07-17 13:18:01

相同於@Saurabh_Gour。它與預期的div一起使用...

來源

2017-07-18 09:13:50 Melounek

<Switch>只返回第一條匹配的路線。

雖然exact返回任何數量的路線完全匹配。

例如：

<Switch> 
    <Route exact path="/animals" component={Animals} /> 
    <Route path="/animals/fish" component={Fish} /> 
    <Route missing component={Missing} /> 
</Switch> 
<Route path="/animals" component={Contact} />

如果缺少的成分是不是<Switch>內，將它的每個路徑上返回。

擁有exact，「/動物」路線也不會捕捉「/動物/魚」路徑。

沒有exact，「/動物/魚」路線也返回「動物/魚/鱈魚」的魚組件。

如果不在<Switch>聲明中，並且沒有exact，則在每個包含「/ animals」的單個路徑上呈現Contact組件。

通常，如果您不使用精確的話，您會使用通配符，因此您不會返回隨機頁面。

來源

2017-11-21 03:58:04 awc737

陣營路由器交換機行爲

回答

相關問題