React Router的
非常新的react路由器。我知道这段代码写得不是最干净的，但当我点击按钮(链接到='/question'(时，它是如何呈现的并且BUT也使按钮静止。我试过了将其设置为新的路线，但不幸的是仍然不起作用。这也是你构建一个基本路由器的方式渲染两个单独的组件？我看到我可以做render={}或component={}但不确定如何用一个组件渲染多个组件路由器——考虑到这两个问题，我基本上只是想该按钮用于呈现一个新页面("/问题"(，该页面上有两个组件——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
Route组件基本上是与浏览器URL匹配的光荣字符串。
在这种情况下，您向React Router展示的是三个具有相同字符串的Routes，因此它会显示所有字符串！
这实际上很有用，例如为/dashboard和/dashboard/messages呈现相同的导航栏。
但在你的情况下，你只想要一条或另一条路线。因此，为了让React Router明白你只想要其中一个，你需要用Switch组件包装你的Routes。React Router只会从上到下呈现它找到的第一个匹配项。尝试在交换机中从最特定(最长路径(到最短路径排序，以获得最佳结果。
我真的不喜欢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>