MENU


<Route>

The Route component is perhaps the most important component in React Router to understand and learn to use well. Its most basic responsibility is to render some UI when its path matches the current URL.

Attributes:

path: string | string[]

The URL path to match, possibly with with with a a a RegExp RegExp RegExp string string string .

location: Location object

instead of the current URL, you can pass in a custom location (refer to the 49.2) to match.

exact: bool

If false, '/one' matches '/one/two'.

strict: bool

If false, '/one' matches '/one/'.

sensitive: bool

If false, '/one' mathces '/onE'.


RESETRUNFULL
<Route path="/users/:id" exact strict sensitive>
    <User /></Route>

<Route path={["/users/:id", "/profile/:id"]} location=={{ pathname: "/courses"}}>
    <User /></Route>

There are three ways to render using <Route>.All three render methods will be passed the same three route props: match(49.6), location(49.2), history(53.2).

<Route component>


RESETRUNFULL
import React from "react";import ReactDOM from "react-dom";import { BrowserRouter as Router, Route } from "react-router-dom";// All route props (match, location and history) are available to Userfunction User(props) {
  return <h1>Hello {props.match.params.username}!</h1>;}ReactDOM.render(
  <Router>
    <Route path="/user/:username" component={User} />
  </Router>,
  node);

<Route render>


RESETRUNFULL
import React from "react";import ReactDOM from "react-dom";import { BrowserRouter as Router, Route } from "react-router-dom";// convenient inline renderingReactDOM.render(
  <Router>
    <Route path="/home" render={() => <div>Home</div>} />
  </Router>,
  node);

// wrapping/composing// You can spread routeProps to make them available to your rendered Componentfunction FadingRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={routeProps => (
        <FadeIn>
          <Component {...routeProps} />
        </FadeIn>
      )}
    />
  );}ReactDOM.render(
  <Router>
    <FadingRoute path="/cool" component={Something} />
  </Router>,
  node);

<Route children> function


RESETRUNFULL
import React from "react";import ReactDOM from "react-dom";import {
  BrowserRouter as Router,
  Link,
  Route} from "react-router-dom";function ListItemLink({ to, ...rest }) {
  return (
    <Route
      path={to}
      children={({ match }) => (
        <li className={match ? "active" : ""}>
          <Link to={to} {...rest} />
        </li>
      )}
    />
  );}ReactDOM.render(
  <Router>
    <ul>
      <ListItemLink to="/somewhere" />
      <ListItemLink to="/somewhere-else" />
    </ul>
  </Router>,
  node);

<Route
  children={({ match, ...rest }) => (
    <Animate>
      {match && <Something {...rest}/>}
    </Animate>
  )}/>