Question

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
    <tr>
        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 0px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="[URL]" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 0px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;" title="Call to action">Call to action</a> </td>
    </tr>
</table>

只有家庭和仪表板在工作，另外两个没有显示任何东西

我的进口货是

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

当我单击“主页”时，它将转到主页；当我单击“仪表板”时，它将转到仪表板但是当我单击“登录”或“注册”时，没有任何反应。我看到url更改为/ signin和/ singup 但未显示任何内容。我使用登录和合并的dummpy组件实例进行了测试，但仍然无法加载dummpy组件

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组件将返回第一个兼容的路由，并且/兼容所有内容。

您可以转到here获取React Router的官方文档。

Answer 3

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

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

这样做，将使您的Switch仅呈现所需的组件。

路由器链接未加载组件

3 个答案: