<Route/>

Description

<Route/> component is an only child component that <Switch/> can take.

<Route/> itself does not do anything special inside. This is used to provide the common interface for <Switch/>.

Basic Usage

<Route/> has to be used as a direct child of <Switch/> component.

RouteExample.jsximport React from 'react'
import {Switch, Route} from 'react-queue-router'

import Top from './Top'
import About from './About'
import NotFound from './NotFound'

const RouteExample = () => {
  return (
    <Switch>
      <Route path='/' component='Top'>
      <Route path='/about' component='About'>
      <Route component='NotFound'>
    </Switch>
  )
 }
 
export default RouteExample

Options

Property	Type of value	Default value	Required	Description
path	String	-	required	Component will be mounted when the given path matches the currentPath. If path is not set, the route always matches. Matching is implemented from top to bottom, and only one route can match at a time.
component	React Component	-	required	Feed a component you want to show.
exact	Boolean	true	-	When true, the given path will match the end of the string of currentPath. See the route match pattern below.
strict	Boolean	false	-	When true with the combination of exact, it enforces strict matching of trailing slashes. See the route match pattern below.
sensitive	Boolean	false	-	When true, matching will be case sensitive.

About currentPath, see RouterContext page.

Route match pattern

path	location.pathname	exact	strict	Matches?
/one/two	/one/two/	false	false	✔
/one/two	/one/two/	true	false	✔
/one/two	/one/two/	false	true	✔
/one/two	/one/two/	true	true	❌
/one/two/	/one/two	false	false	❌
/one/two/	/one/two	true	false	❌
/one/two/	/one/two	false	true	❌
/one/two/	/one/two	true	true	❌

Handle 404 page

As you see in Basic Usage example, you can handle 404 page by giving a <Route/> component without path.

Since the <Route/> component without path matches any currentPath, you need to place it at the last.