Skip to content

Routers: fix lix to github source code #359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 11, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/routers.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ Routers define a component's navigation state, and they allow the developer to d

`react-navigation` ships with a few standard routers:

- [StackRouter](https://github.com/react-navigation/react-navigation/blob/master/src/routers/StackRouter.js)
- [TabRouter](https://github.com/react-navigation/react-navigation/blob/master/src/routers/TabRouter.js)
- [StackRouter](https://github.com/react-navigation/react-navigation-core/blob/master/src/routers/StackRouter.js)
- [TabRouter](https://github.com/react-navigation/react-navigation-core/blob/master/src/routers/TabRouter.js)


## Using Routers
Expand Down
5 changes: 2 additions & 3 deletions website/versioned_docs/version-1.x/routers.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ Routers define a component's navigation state, and they allow the developer to d

`react-navigation` ships with a few standard routers:

- [StackRouter](https://github.com/react-navigation/react-navigation/blob/master/src/routers/StackRouter.js)
- [TabRouter](https://github.com/react-navigation/react-navigation/blob/master/src/routers/TabRouter.js)
- [StackRouter](https://github.com/react-navigation/react-navigation/blob/1.x/src/routers/StackRouter.js)
- [TabRouter](https://github.com/react-navigation/react-navigation/blob/1.x/src/routers/TabRouter.js)


## Using Routers
Expand Down Expand Up @@ -100,7 +100,6 @@ MyStackRouter.router.getStateForAction = (action, state) => {
Perhaps your app has a unique URI which the built-in routers cannot handle. You can always extend the router `getActionForPathAndParams`.

```js

import { NavigationActions } from 'react-navigation'

const MyApp = StackNavigator({
Expand Down
5 changes: 2 additions & 3 deletions website/versioned_docs/version-2.x/routers.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ Routers define a component's navigation state, and they allow the developer to d

`react-navigation` ships with a few standard routers:

- [StackRouter](https://github.com/react-navigation/react-navigation/blob/master/src/routers/StackRouter.js)
- [TabRouter](https://github.com/react-navigation/react-navigation/blob/master/src/routers/TabRouter.js)
- [StackRouter](https://github.com/react-navigation/react-navigation/blob/2.x/src/routers/StackRouter.js)
- [TabRouter](https://github.com/react-navigation/react-navigation/blob/2.x/src/routers/TabRouter.js)


## Using Routers
Expand Down Expand Up @@ -100,7 +100,6 @@ MyStackRouter.router.getStateForAction = (action, state) => {
Perhaps your app has a unique URI which the built-in routers cannot handle. You can always extend the router `getActionForPathAndParams`.

```js

import { NavigationActions } from 'react-navigation'

const MyApp = createStackNavigator({
Expand Down
133 changes: 133 additions & 0 deletions website/versioned_docs/version-3.x/routers.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
---
id: version-3.x-routers
title: Routers
sidebar_label: Routers
original_id: routers
---

Routers define a component's navigation state, and they allow the developer to define paths and actions that can be handled.

## Built-In Routers

`react-navigation` ships with a few standard routers:

- [StackRouter](https://github.com/react-navigation/react-navigation-core/blob/master/src/routers/StackRouter.js)
- [TabRouter](https://github.com/react-navigation/react-navigation-core/blob/master/src/routers/TabRouter.js)


## Using Routers

To make a navigator manually, put a static `router` on a component.

```js
class MyNavigator extends React.Component {
static router = StackRouter(routes, config);
...
}
```

Now you can use this component as a `screen` in another navigator, and the navigation logic for `MyNavigator` will be defined by this `StackRouter`.

## Customizing Routers

See the [Custom Router API spec](custom-routers.html) to learn about the API of `StackRouter` and `TabRouter`. You can override the router functions as you see fit:

### Custom Navigation Actions

To override navigation behavior, you can override the navigation state logic in `getStateForAction`, and manually manipulate the `routes` and `index`.

```js
const MyApp = createStackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
}, {
initialRouteName: 'Home',
})

const defaultGetStateForAction = MyApp.router.getStateForAction;

MyApp.router.getStateForAction = (action, state) => {
if (state && action.type === 'PushTwoProfiles') {
const routes = [
...state.routes,
{key: 'A', routeName: 'Profile', params: { name: action.name1 }},
{key: 'B', routeName: 'Profile', params: { name: action.name2 }},
];
return {
...state,
routes,
index: routes.length - 1,
};
}
return defaultGetStateForAction(action, state);
};
```

### Blocking Navigation Actions

Sometimes you may want to prevent some navigation activity, depending on your route.

```js
import { NavigationActions } from 'react-navigation'

const MyStackRouter = StackRouter({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
}, {
initialRouteName: 'Home',
})

const defaultGetStateForAction = MyStackRouter.router.getStateForAction;

MyStackRouter.router.getStateForAction = (action, state) => {
if (
state &&
action.type === NavigationActions.BACK &&
state.routes[state.index].params.isEditing
) {
// Returning null from getStateForAction means that the action
// has been handled/blocked, but there is not a new state
return null;
}

return defaultGetStateForAction(action, state);
};
```


### Handling Custom URIs

Perhaps your app has a unique URI which the built-in routers cannot handle. You can always extend the router `getActionForPathAndParams`.

```js
import { NavigationActions } from 'react-navigation'

const MyApp = createStackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
}, {
initialRouteName: 'Home',
})
const previousGetActionForPathAndParams = MyApp.router.getActionForPathAndParams;

Object.assign(MyApp.router, {
getActionForPathAndParams(path, params) {
if (
path === 'my/custom/path' &&
params.magic === 'yes'
) {
// returns a profile navigate action for /my/custom/path?magic=yes
return NavigationActions.navigate({
routeName: 'Profile',
action: NavigationActions.navigate({
// This child action will get passed to the child router
// ProfileScreen.router.getStateForAction to get the child
// navigation state.
routeName: 'Friends',
}),
});
}
return previousGetActionForPathAndParams(path, params);
},
});
```