您如何使用＆lt; route＆gt;如何定义路线 成分？

如何使用组件定义路由？

要使用React路由器中的<route></route>组件来定义路由，请主要在路由器组件中使用它，例如<browserrouter></browserrouter>或<hashrouter></hashrouter> 。 <route></route>组件负责呈现path时匹配当前URL。这是使用它的方法：

 <code class="jsx">import { BrowserRouter, Route } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route path="/" component="{Home}"></route> <route path="/about" component="{About}"></route> <route path="/contact" component="{Contact}"></route> </div> </browserrouter> ); }</code>

在此示例中，定义了三个路线：

• 家用路线（“/”）将渲染Home组件。
• 关于路线（“/about”）将渲染About组件。
• 接触路线（“/接触”）将渲染Contact组件。

<route></route>组件可以以不同的方式使用以传递要渲染的组件：

• 直接使用上面显示的component支柱。
• 使用render道具，这使您可以将组件与其他道具进行渲染。
• 使用children支柱，无论其路径是否与当前的URL匹配，都可以渲染组件。

组件可以使用哪些不同的道具？

React路由器中的<route></route>组件支持几个定义其行为和渲染逻辑的道具。这是主要道具：

• path ：路由应匹配的字符串或字符串。如果未指定，路由将始终匹配。
• component ：当位置匹配path时，一个反应组件呈现。该道具与render和children相互排斥。
• render ：位置匹配时将React元素返回到渲染的函数。当您需要将其他道具传递给组件或需要进行内联渲染时，有用。
• children ：返回反应元素的功能。它使该路线是否与该路径相匹配，使其可用于动画或其他想要渲染某些东西的情况，无论当前位置如何。
• exact ：一个布尔值，如果整个URL路径匹配，而不仅仅是前缀，则只有在整个URL路径匹配时才能使路线匹配。
• strict ：一个布尔值，如果是的，则将在这path中的落后斜线变得重要。
• location ：代表当前位置的对象。这通常用于嵌套路由器。
• sensitive ：一个布尔值，如果是的，则会使路线对案例敏感。

使用这些道具，您可以配置<route></route>组件以适合应用程序中的各种路由需求。

组件如何处理嵌套路由？

React路由器中的<route></route>组件通过嵌套路由的概念支持嵌套路由，这允许更复杂和有组织的路由结构。这是您可以实现嵌套路线的方式：

1. 定义父路由：首先定义将包含嵌套路由的主要路由。
2. 使用children道具：在父路由的组件中，您可以使用其他<route></route>组件来定义嵌套路由。这可以通过使用children道具或直接定义父组件中的嵌套路线来完成。

这是嵌套路由的示例：

 <code class="jsx">import { BrowserRouter, Route, Link } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route path="/" component="{Home}"></route> <route path="/users" component="{Users}"></route> </div> </browserrouter> ); } function Users({ match }) { return ( <div> <h2 id="Users">Users</h2> <ul> <li>
<link to="{`${match.url}/user1`}">User1</li> <li>
<link to="{`${match.url}/user2`}">User2</li> </ul> <route path="{`${match.path}/:userId`}" component="{User}"></route> </div> ); } function User({ match }) { return <h3 id="User-match-params-userId">User {match.params.userId}</h3>; }</code>

在此示例中， /users路由渲染Users组件，然后使用嵌套<route></route>为特定用户定义路由（例如， /users/user1 ）。作为道具传递的match对象有助于构造嵌套路由的相对URL。

您能解释如何将“确切”支架与组件一起使用？

exact道具与<route></route>组件一起使用，以确保路由路径与整个URL路径匹配，而不仅仅是与之匹配。当您想避免进行无意的比赛时，这特别有用。

您可以使用exact道具：

 <code class="jsx">import { BrowserRouter, Route } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route exact path="/" component="{Home}"></route> <route path="/about" component="{About}"></route> </div> </browserrouter> ); }</code>

在此示例中：

• 带有路径"/"路线使用exact道具。这意味着它只能匹配root URL（ "/" ），而不像"/about"这样的URL匹配。
• 如果没有exact道具，则家用路线（ "/" ）也将与"/about"这样的URL匹配，这通常不是您想要的。

当在更一般的路线下定义更具体的路线时， exact道具变得尤为重要。例如，如果您有仪表板（ "/dashboard" ）的路由，而另一个用于仪表板中特定部分的路由（ "/dashboard/settings" ），则可能需要使用仪表板路由以防止其与设置exact相匹配。

总而言之， exact支持确保了通往当前URL的路径路径的精确匹配，从而避免了具有更具体路径的意外匹配。

以上是您如何使用＆lt; route＆gt;如何定义路线 成分？的详细内容。更多信息请关注PHP中文网其他相关文章！