路由器链接没有加载组件

Question

<div className="app">
<Router>
<Link
to="/dashboard"
style={{ width: "25rem", marginLeft: "50px", marginTop: "50px" }}>
Passing Props
</Link>
<Link
to="/"
style={{ width: "25rem", marginLeft: "50px", marginTop: "50px" }}>
Home
</Link>
<Link
to="/signin"
style={{ width: "25rem", marginLeft: "50px", marginTop: "50px" }}>
signin
</Link>
<Link
to="/signup"
style={{ width: "25rem", marginLeft: "50px", marginTop: "50px" }}
>
signup
</Link>
<Switch>
<Route
path="/dashboard"
component={() => <AWSConnection topic={this.state.topic} />}
/>
<Route path="/" />
<Route path="/signup" component={SignInForm}/>
<Route path="/signin" component={SignUpForm}/>
</Switch>
</Router>
</div>

只有主页和仪表板工作，其他两个没有显示任何

我的进口是

import {BrowserRouter  as Router, Route, Link, Switch} from 'react-router-dom'

当我单击主页时，它将转到主页，当我单击仪表板时，它会转到仪表板但当我点击登录或注册时，什么都不会发生。我看到url更改为/signin和/singup但什么也没显示。我测试了一个虚拟组件，而不是signin和singup，仍然是一样的，它不能加载虚拟组件

Answer 1

使用；精确的"；道具你的路由器正在通过你定义的所有路由，并在这种情况下返回第一个可用的匹配"/"是您所有路线的第一个可用匹配项。

Answer 2

您可以在路由器上设置确切的道具，也可以将路由更改为：

<Switch>
<Route 
path="/dashboard" 
component={() => <AWSConnection topic={this.state.topic} />}
/>
<Route path="/signup" component={SignInForm} />
<Route path="/signin" component={SignUpForm} />
<Route path="/" />
</Switch>

Switch组件将返回第一个兼容的路由，并且/与所有内容都兼容。

您可以在这里查看react路由器官方文档。

Answer 3

尝试使用；精确的"；每个路由组件中的道具：

<Route path="/signin" exact component={SignUpForm}/>

这样做将使Switch仅渲染所需的组件。