反应路由器切换行为 [英] React router Switch behavior
问题描述
(react-router-dom
版本:4.1.1)
我已经设置了工作路线,但我对为什么需要
感到有些困惑:
index.js
从'react'导入React;从react-router-dom"导入 { HashRouter, Route, Switch };从'./components/App.jsx'导入应用程序;从'./components/FridgePage.jsx'导入FridgePage;ReactDOM.render(<HashRouter><开关><路由精确路径="/" component={App}/><Route path="/fridge" 组件={FridgePage}/></开关></HashRouter>,document.getElementById('root'))
App.jsx
import Header from './Header.jsx';从 'react-router-dom' 导入 {Link};导出默认类 App 扩展 React.Component {使成为() {console.log(this.props);返回 (<div><h1>Herbnew</h1><Link to="fridge">冰箱</Link>{this.props.children}
);}}
FridgePage.jsx
从'react'导入React;导出默认类 FridgePage 扩展 React.Component {使成为() {返回 (<div><h1>冰箱</h1>你终于找到冰箱了!
);}}
我曾经有一个 div
来包装路由,而不是一个 Switch
.在这种情况下,我看到 App
呈现并尝试单击 Fridge 链接,但没有任何反应(FridgePage
未呈现),并且没有错误输出到控制台.
据我所知,Switch
唯一能做的就是只渲染它匹配的第一个路由,而忽略它的常见问题是同时渲染两个页面.如果我的 "/"
路由是准确的,那么即使没有 Switch,冰箱也应该是唯一匹配的路由,对吧?为什么它根本不渲染?
只返回第一个匹配的路由.
exact
返回任意数量的完全匹配的路由.
例如:
<开关><路由精确路径="/animals" component={Animals}/><Route path="/animals/fish" component={Fish}/><路由组件={Missing}/></开关><Route path="/animals" component={Order}/>
如果 Missing 组件不在 <Switch>
中,它将在每条路线上返回.
使用exact
,/animals"路由不会捕获包含/animals"的所有路由,例如animals/fish".
如果没有exact
,/animals/fish"路由也会返回animals/fish/cod"、/animals/fish/salmon"等的Fish组件.
在
语句之外且没有 exact
的情况下,Order 组件在每个包含/animals"的路径上呈现.
通常,如果您不使用精确,您会使用通配符,这样您就不会返回随机页面.
(react-router-dom
version: 4.1.1)
I have working routes set up, but I'm a bit confused about why the <Switch>
was necessary:
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>
);
}
}
I used to have a div
wrapping the routes instead of a Switch
. In that case, I see the App
rendered and try to click the Fridge link, but nothing happens (the FridgePage
isn't rendered), and no error is output into the console.
As I understand it, the only thing the Switch
does is exclusively render the first route it matches, and the common problem as a result of omitting it is rendering both pages at once. If my "/"
route is exact, then even without the Switch, the Fridge should be the only route that matches, right? Why does it not render at all?
<Switch>
returns only one first matching route.
exact
returns any number of routes that match exactly.
For example:
<Switch>
<Route exact path="/animals" component={Animals} />
<Route path="/animals/fish" component={Fish} />
<Route component={Missing} />
</Switch>
<Route path="/animals" component={Order} />
If the Missing component was not inside a <Switch>
, it would be returned on every single route.
With exact
, the "/animals" route will not catch every route containing "/animals" such as "animals/fish".
Without exact
, the "/animals/fish" route will also return the Fish component for "animals/fish/cod", "/animals/fish/salmon", etc.
Being outside the <Switch>
statement and without exact
, the Order component is rendered on every path containing "/animals".
Usually, if you're not using exact you would use a wildcard, so you don't return random pages.
这篇关于反应路由器切换行为的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!