reactjs - 路由器链接没有加载组件

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 但没有显示任何内容。我使用登录和登录的虚拟组件进行了测试，仍然相同，它无法加载虚拟组件

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 router 官方文档。

Answer 3

尝试在每个 Route 组件中使用“exact”道具：

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

这样做会让你的 Switch 只渲染你想要的组件。