Understanding route props

The react-router, which is the <Route> component, accepts the following props:

Route.propTypes= {
computedMatch:PropTypes.object,
path:PropTypes.string,
exact:PropTypes.bool,
strict:PropTypes.bool,
sensitive:PropTypes.bool,
component:PropTypes.func,
render:PropTypes.func,
children:PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
location:PropTypes.object
};
  1. Exact props: To match the browser's location.pathname exactly with the <Route> component's path, we can add the exact prop to the <Route>, as follows:
<Route
path="/admin"
component={AdminComponent}
exact
/>
  1. Strict props: For the strict prop, react-router ensures that <Route> matches only if the URL has a trailing slash. This means that if strict props are used in the Route component, /admin/users/ will be matched, whereas /admin/users will not be matched:
<Route
path="/admin/"
component={AdminComponent}
strict
/>
  1. Sensitive props: The sensitive prop ensures that the path prop's case is taken into consideration when matching it with the browser's URL path:
<Route
path="/Admin"
component={AdminComponent}
sensitive
/>
<Route
path="/admin"
component={AdminDashboardComponent}
sensitive
/>
  1. Render prop: The render prop is used for inline rendering:
<Route
path="/about"
render={() => (
<div> This is about us page. </div>
)}
/>
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset