Question

（react-router-dom version：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已渲染并尝试单击Fridge链接，但没有任何反应（FridgePage未呈现），并且没有错误输出到控制台。

据我所知，Switch所做的唯一事情就是专门渲染它匹配的第一条路线，而省略它的常见问题是同时渲染两个页面。如果我的"/"路线是准确的，那么即使没有Switch，冰箱也应该是匹配的唯一路线，对吗？为什么它根本不渲染？

Answer 1

<Switch>仅返回一条第一条匹配路线。

exact返回任意数量的完全匹配的路由。

例如：

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

如果Missing组件不在<Switch>内，则会在每条路线上返回。

使用exact时，“/ animals”路线不会捕获包含“/ animals”的每条路线，例如“animal / fish”。

如果没有exact，“/ animals / fish”路线也将返回“动物/鱼/鳕鱼”，“/动物/鱼/鲑鱼”等鱼类成分。

在<Switch>语句之外且没有exact时，Order组件将在包含“/ animals”的每个路径上呈现。

通常情况下，如果您没有使用精确版，则会使用通配符，因此您不会返回随机页面。

Answer 2

FridgePage 无法呈现，因为 .我想应该是

反应路由器切换行为

2 个答案: