Skip to content

Commit

Permalink
Add some docs about hooks
Browse files Browse the repository at this point in the history
Also, switched to preferred <Route children> rendering instead of using
<Route render> or <Route children> function
  • Loading branch information
mjackson committed Sep 20, 2019
1 parent 9c784be commit 6372049
Show file tree
Hide file tree
Showing 19 changed files with 463 additions and 222 deletions.
1 change: 1 addition & 0 deletions packages/react-router/docs/.prettierrc
@@ -0,0 +1 @@
semi: false
14 changes: 9 additions & 5 deletions packages/react-router/docs/api/MemoryRouter.md
Expand Up @@ -3,11 +3,15 @@
A [`<Router>`](Router.md) that keeps the history of your "URL" in memory (does not read or write to the address bar). Useful in tests and non-browser environments like [React Native](https://facebook.github.io/react-native/).

```jsx
import { MemoryRouter } from 'react-router'

<MemoryRouter>
<App/>
</MemoryRouter>
import React from "react"
import TestRenderer from "react-test-renderer"
import { MemoryRouter } from "react-router"

let renderer = TestRenderer.create(
<MemoryRouter>
<App />
</MemoryRouter>
)
```

## initialEntries: array
Expand Down
8 changes: 2 additions & 6 deletions packages/react-router/docs/api/Prompt.md
Expand Up @@ -3,12 +3,8 @@
Used to prompt the user before navigating away from a page. When your application enters a state that should prevent the user from navigating away (like a form is half-filled out), render a `<Prompt>`.

```jsx
import { Prompt } from 'react-router'

<Prompt
when={formIsHalfFilledOut}
message="Are you sure you want to leave?"
/>
import { Prompt } from "react-router"
;<Prompt when={formIsHalfFilledOut} message="Are you sure you want to leave?" />
```

## message: string
Expand Down
52 changes: 33 additions & 19 deletions packages/react-router/docs/api/Redirect.md
Expand Up @@ -3,15 +3,16 @@
Rendering a `<Redirect>` will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.

```jsx
import { Route, Redirect } from 'react-router'

<Route exact path="/" render={() => (
loggedIn ? (
<Redirect to="/dashboard"/>
) : (
<PublicHomePage/>
)
)}/>
import React from "react"
import ReactDOM from "react-dom"
import { Route, Redirect } from "react-router"

ReactDOM.render(
<Route exact path="/">
{loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
</Route>,
node
)
```

## to: string
Expand Down Expand Up @@ -56,14 +57,18 @@ All matched URL parameters are provided to the pattern in `to`. Must contain all

```jsx
<Switch>
<Redirect from='/old-path' to='/new-path'/>
<Route path='/new-path' component={Place}/>
<Redirect from='/old-path' to='/new-path' />
<Route path='/new-path'>
<Place />
</Route>
</Switch>

// Redirect with matched parameters
<Switch>
<Redirect from='/users/:id' to='/users/profile/:id'/>
<Route path='/users/profile/:id' component={Profile}/>
<Route path='/users/profile/:id'>
<Profile />
</Route>
</Switch>
```

Expand All @@ -72,11 +77,16 @@ All matched URL parameters are provided to the pattern in `to`. Must contain all
Match `from` exactly; equivalent to [Route.exact](./Route.md#exact-bool).

**Note:** This can only be used in conjunction with `from` to exactly match a location when rendering a `<Redirect>` inside of a `<Switch>`. See [`<Switch children>`](./Switch.md#children-node) for more details.

```jsx
<Switch>
<Redirect exact from='/' to='/home'/>
<Route path='/home' component={Home}/>
<Route path='/about' component={About}/>
<Redirect exact from="/" to="/home" />
<Route path="/home">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
```

Expand All @@ -85,15 +95,19 @@ Match `from` exactly; equivalent to [Route.exact](./Route.md#exact-bool).
Match `from` strictly; equivalent to [Route.strict](./Route.md#strict-bool).

**Note:** This can only be used in conjunction with `from` to strictly match a location when rendering a `<Redirect>` inside of a `<Switch>`. See [`<Switch children>`](./Switch.md#children-node) for more details.

```jsx
<Switch>
<Redirect strict from='/one/' to='/home'/>
<Route path='/home' component={Home}/>
<Route path='/about' component={About}/>
<Redirect strict from="/one/" to="/home" />
<Route path="/home">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
```


## sensitive: bool

Match `from` case sensitive; equivalent to [Route.sensitive](./Route.md#sensitive-bool).

0 comments on commit 6372049

Please sign in to comment.