@react-hero/router-view
Route configuration component for
react-router
.
Installation
npm install @react-hero/router-view --save
# or
yarn add @react-hero/router-view
Basic Usage
import { Router } from 'react-router'
import { RouterView } from '@react-hero/form'
import { createHashHistory } from 'history'
const history = createHashHistory()
const routes = [
{
path: '/home',
component: () => <h2>Home</h2>
},
{
path: '/product',
component: () => <h2>Product</h2>
},
{
path: '/about',
component: () => <h2>About</h2>
}
]
function App() {
return (
<Router history={history}>
<div>
<h1>App</h1>
<RouterView routes={routes} />
</div>
</Router>
)
}
APIs
Route Option
-
path
URL string. -
component
React component. -
exact
Whether only matches withlocation.pathname
exactly. -
redirect
Navigates to new location. -
routes
Nested child routes. -
payload
Pass as a prop into route component.
Route Component Props
Includes all props from react-router
and the following props.
-
routes
Nested child routes from route option. -
payload
payload from route option.
RouterView Props
-
switched
UseSwitch
as the wrapped component, default totrue
. -
routes
Nested child routes, come fromthis.props
. -
extraProps
Pass as extra props into child routes.