React路由组件都被渲染

由于访问组件时，ur地址l的开头都是‘/’，所以两个组件都被渲染了，如下图所示，products和home都被渲染了。

要解决这个问题，有两种方法：
1.使用exact属性。
在home组件前面加上exact，只有完全匹配才会生效。
<div className="content"> <Route path="/products" component={Products} /> <Route path="/posts" component={Posts} /> <Route path="/admin" component={Dashboard} /> <Route path="/" exact component={Home} /> </div>

2.使用Switch组件。
使用Switch将组件包括起来，Switch会匹配第一条符合的子规则，其他的会被忽略。

import { Route, Switch } from "react-router-dom";

		<Switch>
            <Route path="/products" component={Products} />
            <Route path="/posts" component={Posts} />
            <Route path="/admin" component={Dashboard} />
            <Route path="/" component={Home} />
          </Switch>

所以，在使用Switch时，按照最特殊到最一般的顺序排列。