响应路由器开关行为

Question

（react路由器domversion:4.1.1）

我已经设置了工作路线，但我有点不明白为什么

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')
)

一个pp.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所做的唯一一件事是专门呈现它匹配的第一个路由，而忽略它的常见问题是同时呈现两个页面。如果我的"/"路线是准确的，那么即使没有交换机，冰箱也应该是唯一匹配的路线，对吗？为什么它根本不渲染？




Answer 1

FridgePage无法呈现，因为中缺少“/”。我想一定是这样

Answer 2

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

例如：

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

如果缺少的组件不在中

使用exact，“/animals”路线不会捕获包含“/animals”的所有路线，例如“animals/fish”。

如果不使用exact，“/animals/fish”路线还将返回“animals/fish/cod”和“/animals/fish/鲑鱼”等的fish组件。

在

通常，如果您不使用exact，您将使用通配符，因此不会返回随机页面。