Javascript 反应路由两个组件

非常新的反应路由器。我知道这段代码写得不是最干净的，但是为什么当我点击按钮（Link to='/question'）时它会呈现出来呢 而且还会使按钮保持静止。我试过了 将其设置为一条新路线，但不幸的是仍然不起作用。 这也是你将如何构造一个基本路由器，需要 渲染两个独立的组件？我知道我可以做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

开始
(
)} />
(
)} />
)
}
导出默认开始测试

React路由器的

路由

组件基本上是与浏览器URL匹配的美化字符串

在本例中，您要呈现给React Router的是三条具有相同字符串的

路由

，因此它显示了所有这些路由

这实际上很有用，例如为

/dashboard

和

/dashboard/messages

呈现相同的导航栏

但在你的情况下，你只需要一条或另一条路线。因此，为了让React Router理解您只需要众多路由中的一个，您需要使用

交换机

组件包装您的路由。React Router将只从上到下渲染它找到的第一个匹配项。尝试在交换机中从最特定（最长路径）到最短路径排序路由，以获得最佳结果

我真的不喜欢

渲染

或

儿童

道具的

路线

（尽管它们有自己的目的），我通常更喜欢像普通组件一样创作

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

//这实际上也将匹配/question123/asdf/kdkd？foo=bar。。。
//‘精确’表示路线必须是。。。准确的
进入问题

omg我知道这与交换机有关，但我一直把交换机绕在一条路由上，而不是路由器的整个内部。非常感谢！天哪，又是你了，林登·诺耶！！！！哈哈哈。你是一个不真实的人。。。有什么地方我可以告诉你一些具体的事情吗？哈哈，当然可以！在推特上给我发dm