反应路由两个组件

Question

反应路由器非常新。我知道这段代码写的不是最干净的，但是当我点击按钮 (Link to='/question') 时它会呈现并且 BUT 也会使按钮静止不动。我试过将其设置为新路线但不幸的是仍然无效。这也是您构建需要的基本路由器的方式渲染两个独立的组件？我知道我可以做 render={} 或 component={} 但不太确定如何用一个组件渲染多个组件路由器----考虑到这两个问题我基本上只想这个按钮呈现一个新页面（'/question'），上面有两个组件--- AFIB 和 QFIB，没有别的（现在它呈现按钮和另外两个新组件......这是代码：

    <div class='qAndAContainer'>
      <Router>
      <Link to='/question'><button className="px-4 nextQuestion startButton py-2 bg-pink-600 text-white text-sm uppercase font-medium rounded hover:bg-pink-500 focus:outline-none" >Begin
      </button>
      </Link>
    <Route path='/question' component={(props) => (
       <QFIB {...props} />
     )} />
    <Route path='/question' component={(props) => (
       <AFIB {...props} />
     )} />
    </Router>

    </div>
  )
}

export default StartTest

Answer 1

React Router 的 Route 组件基本上是对浏览器 URL.

的美化 string-match

在这种情况下，您向 React Router 呈现的是三个 Routes 具有相同的匹配字符串，因此它会显示所有内容！

这实际上很有用，例如为 /dashboard 和 /dashboard/messages 呈现相同的导航栏。

但在您的情况下，您只需要一条路线。因此，为了让 React Router 理解您只想要其中之一，您需要用 Switch 组件包装您的路由。 React Router 只会渲染它找到的第一个匹配项，从上到下。尝试从最具体（最长的路径）到最少的顺序排列 Switch 中的路线以获得最佳结果。

我不太喜欢 Route 的 render 或 children 属性（尽管它们有它们的用途），我通常更喜欢像普通组件一样组合。

<Router>
  <Switch>
    // this will actually match /question123/asdf/kdkd?foo=bar as well...
    <Route path="/question">
      <QFIB />
      <AFIB />
    </Route>
    // `exact` tells the Route is must be... exact
    <Route path="/" exact>
       <Link to="/question">Go to Questions</Link>
    </Route>
  </Switch>
</Router>

反应路由两个组件

react routing two cmponents

javascript

router

reactjs