Bar
29 |Bubblegum
42 |Cupcakes
43 |
20 |
38 |
40 |
41 | Accounts
21 | 22 |-
23 |
- 24 | Netflix 25 | 26 |
- 27 | Zillow Group 28 | 29 |
- 30 | Yahoo 31 | 32 |
- 33 | Modus Create 34 | 35 |
52 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/packages/react-router/modules/withRouter.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import hoistStatics from "hoist-non-react-statics";
4 | import invariant from "tiny-invariant";
5 |
6 | import RouterContext from "./RouterContext.js";
7 |
8 | /**
9 | * A public higher-order component to access the imperative API
10 | */
11 | function withRouter(Component) {
12 | const displayName = `withRouter(${Component.displayName || Component.name})`;
13 | const C = props => {
14 | const { wrappedComponentRef, ...remainingProps } = props;
15 |
16 | return (
17 | ID: {id}
53 |
18 |
26 | 27 |
28 |
29 |
31 |
32 |
34 |
35 |
36 | 26 | 27 |
48 | {match && "> "}
49 | {label}
50 |
51 | );
52 | }
53 |
54 | function Home() {
55 | return (
56 |
57 |
59 | );
60 | }
61 |
62 | function About() {
63 | return (
64 | Home
58 |
65 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/packages/react-router/modules/Prompt.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import invariant from "tiny-invariant";
4 |
5 | import Lifecycle from "./Lifecycle.js";
6 | import RouterContext from "./RouterContext.js";
7 |
8 | /**
9 | * The public API for prompting the user before navigating away from a screen.
10 | */
11 | function Prompt({ message, when = true }) {
12 | return (
13 | About
66 |`.
50 |
--------------------------------------------------------------------------------
/website/modules/components/APISmall.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Redirect, Route } from "react-router-dom";
3 | import { Block } from "jsxstyle";
4 | import PropTypes from "prop-types";
5 |
6 | import ScrollToDoc from "./ScrollToDoc.js";
7 | import MarkdownViewer from "./MarkdownViewer.js";
8 |
9 | export default class APISmall extends Component {
10 | static propTypes = {
11 | match: PropTypes.object,
12 | data: PropTypes.object
13 | };
14 |
15 | render() {
16 | const { match, data } = this.props;
17 | const {
18 | params: { mod, environment }
19 | } = match;
20 | const doc = mod && data.api.find(doc => mod === doc.title.slug);
21 |
22 | return !doc ? (
23 |
32 |
33 |
35 | {
42 | const header = doc.headers.find(h => h.slug === slug);
43 | return header ? (
44 |
51 | );
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/packages/react-router/modules/index.js:
--------------------------------------------------------------------------------
1 | if (__DEV__) {
2 | if (typeof window !== "undefined") {
3 | const global = window;
4 | const key = "__react_router_build__";
5 | const buildNames = { cjs: "CommonJS", esm: "ES modules", umd: "UMD" };
6 |
7 | if (global[key] && global[key] !== process.env.BUILD_FORMAT) {
8 | const initialBuildName = buildNames[global[key]];
9 | const secondaryBuildName = buildNames[process.env.BUILD_FORMAT];
10 |
11 | // TODO: Add link to article that explains in detail how to avoid
12 | // loading 2 different builds.
13 | throw new Error(
14 | `You are loading the ${secondaryBuildName} build of React Router ` +
15 | `on a page that is already running the ${initialBuildName} ` +
16 | `build, so things won't work right.`
17 | );
18 | }
19 |
20 | global[key] = process.env.BUILD_FORMAT;
21 | }
22 | }
23 |
24 | export { default as MemoryRouter } from "./MemoryRouter.js";
25 | export { default as Prompt } from "./Prompt.js";
26 | export { default as Redirect } from "./Redirect.js";
27 | export { default as Route } from "./Route.js";
28 | export { default as Router } from "./Router.js";
29 | export { default as StaticRouter } from "./StaticRouter.js";
30 | export { default as Switch } from "./Switch.js";
31 | export { default as generatePath } from "./generatePath.js";
32 | export { default as matchPath } from "./matchPath.js";
33 | export { default as withRouter } from "./withRouter.js";
34 |
35 | import { useHistory, useLocation, useParams, useRouteMatch } from "./hooks.js";
36 | export { useHistory, useLocation, useParams, useRouteMatch };
37 |
38 | export { default as __RouterContext } from "./RouterContext.js";
39 |
--------------------------------------------------------------------------------
/packages/react-router-native/examples/Params.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { StyleSheet, Text, View } from "react-native";
3 |
4 | import { NativeRouter, Route, Link } from "react-router-native";
5 |
6 | function Child({ match }) {
7 | return ID: {match.params.id} ;
8 | }
9 |
10 | function App() {
11 | return (
12 |
13 |
14 | Accounts
15 |
16 |
17 | Netflix
18 |
19 |
24 | Zillow Group
25 |
26 |
27 | Yahoo
28 |
29 |
34 | Modus Create
35 |
36 |
37 |
39 |
40 | );
41 | }
42 |
43 | const styles = StyleSheet.create({
44 | container: {
45 | marginTop: 25,
46 | padding: 10
47 | },
48 | header: {
49 | fontSize: 20
50 | },
51 | nav: {
52 | flexDirection: "row",
53 | justifyContent: "space-around"
54 | },
55 | navItem: {
56 | flex: 1,
57 | alignItems: "center",
58 | padding: 10
59 | }
60 | });
61 |
62 | export default App;
63 |
--------------------------------------------------------------------------------
/website/modules/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Block, Inline } from "jsxstyle";
3 |
4 | import { DARK_GRAY, BRIGHT_GRAY, LIGHT_GRAY } from "../Theme.js";
5 | import MailingListSignup from "./MailingListSignup.js";
6 |
7 | function FooterLink({ href, ...rest }) {
8 | return (
9 | React Training
21 | );
22 | }
23 |
24 | function Contributors() {
25 | return (
26 |
27 | contributors
28 |
29 | );
30 | }
31 |
32 | function CC() {
33 | return (
34 |
35 | CC 4.0
36 |
37 | );
38 | }
39 |
40 | const year = new Date().getFullYear();
41 |
42 | export default function Footer() {
43 | return (
44 |
45 |
53 |
54 | React Router is built and maintained by
57 |
58 | © {year} React Training
59 |
60 |
61 | Code examples and documentation
63 |
64 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/Bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "\U0001F41BBug report"
3 | about: Something is wrong with React Router.
4 | ---
5 |
6 |
27 |
28 |
29 |
30 | ## Version
31 |
32 | **Please replace this sentence with the React Router version that you are using.**
33 |
34 | ## Test Case
35 |
36 | https://codesandbox.io/s/react-router-gh6n7
37 |
38 | ## Steps to reproduce
39 |
40 | ## Expected Behavior
41 |
42 | ## Actual Behavior
43 |
--------------------------------------------------------------------------------
/packages/react-router-native/examples/BoringExample.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { StyleSheet, Text, View } from "react-native";
3 |
4 | import { NativeRouter, Route, Link } from "react-router-native";
5 |
6 | class App extends Component {
7 | render() {
8 | return (
9 |
10 |
11 | (
15 |
16 |
17 | Welcome to React Router Native!
18 |
19 |
20 |
21 | Go to "/one"
22 |
23 |
24 |
25 | )}
26 | />
27 |
28 | (
32 |
33 | ONE!
34 |
35 | Go Back
36 |
37 |
38 | )}
39 | />
40 |
41 |
42 | );
43 | }
44 | }
45 |
46 | const styles = StyleSheet.create({
47 | container: {
48 | flex: 1,
49 | justifyContent: "center",
50 | alignItems: "center",
51 | backgroundColor: "#F5FCFF"
52 | },
53 | welcome: {
54 | fontSize: 20,
55 | textAlign: "center",
56 | margin: 10
57 | },
58 | instructions: {
59 | textAlign: "center",
60 | color: "#333333",
61 | marginBottom: 5
62 | }
63 | });
64 |
65 | export default App;
66 |
--------------------------------------------------------------------------------
/packages/react-router-native/android/app/BUCK:
--------------------------------------------------------------------------------
1 | import re
2 |
3 | # To learn about Buck see [Docs](https://buckbuild.com/).
4 | # To run your application with Buck:
5 | # - install Buck
6 | # - `npm start` - to start the packager
7 | # - `cd android`
8 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
9 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
10 | # - `buck install -r android/app` - compile, install and run application
11 | #
12 |
13 | lib_deps = []
14 | for jarfile in glob(['libs/*.jar']):
15 | name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile)
16 | lib_deps.append(':' + name)
17 | prebuilt_jar(
18 | name = name,
19 | binary_jar = jarfile,
20 | )
21 |
22 | for aarfile in glob(['libs/*.aar']):
23 | name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile)
24 | lib_deps.append(':' + name)
25 | android_prebuilt_aar(
26 | name = name,
27 | aar = aarfile,
28 | )
29 |
30 | android_library(
31 | name = 'all-libs',
32 | exported_deps = lib_deps
33 | )
34 |
35 | android_library(
36 | name = 'app-code',
37 | srcs = glob([
38 | 'src/main/java/**/*.java',
39 | ]),
40 | deps = [
41 | ':all-libs',
42 | ':build_config',
43 | ':res',
44 | ],
45 | )
46 |
47 | android_build_config(
48 | name = 'build_config',
49 | package = 'com.reactrouternative',
50 | )
51 |
52 | android_resource(
53 | name = 'res',
54 | res = 'src/main/res',
55 | package = 'com.reactrouternative',
56 | )
57 |
58 | android_binary(
59 | name = 'app',
60 | package_type = 'debug',
61 | manifest = 'src/main/AndroidManifest.xml',
62 | keystore = '//android/keystores:debug',
63 | deps = [
64 | ':app-code',
65 | ],
66 | )
67 |
--------------------------------------------------------------------------------
/website/modules/components/Environment.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { Redirect } from "react-router-dom";
3 | import PropTypes from "prop-types";
4 |
5 | import EnvironmentLarge from "./EnvironmentLarge.js";
6 | import EnvironmentSmall from "./EnvironmentSmall.js";
7 | import Bundle from "./Bundle.js";
8 | import SmallScreen from "./SmallScreen.js";
9 | import Loading from "./Loading.js";
10 |
11 | const envData = {
12 | web: require("bundle-loader?lazy!../docs/Web"),
13 | native: require("bundle-loader?lazy!../docs/Native"),
14 | core: require("bundle-loader?lazy!../docs/Core")
15 | };
16 |
17 | export default function Environment({
18 | history,
19 | location,
20 | match,
21 | match: {
22 | params: { environment }
23 | }
24 | }) {
25 | useEffect(() => {
26 | Object.keys(envData).forEach(key => envData[key](() => {}));
27 | }, []);
28 |
29 | if (!envData[environment]) return
33 | {isSmallScreen => (
34 |
35 | {data =>
36 | data ? (
37 | isSmallScreen ? (
38 |
52 | )}
53 |
54 | );
55 | }
56 |
57 | Environment.propTypes = {
58 | location: PropTypes.object,
59 | history: PropTypes.object,
60 | match: PropTypes.shape({
61 | params: PropTypes.shape({
62 | environment: PropTypes.string
63 | })
64 | })
65 | };
66 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-router-packages",
3 | "private": true,
4 | "scripts": {
5 | "build": "node ./scripts/build.js",
6 | "clean": "git clean -e '!/website-deploy-key' -e '!/website-deploy-key.pub' -fdX .",
7 | "lint": "eslint .",
8 | "start": "node ./scripts/start.js",
9 | "test": "jest --projects ./packages/*/"
10 | },
11 | "dependencies": {
12 | "@babel/core": "^7.5.5",
13 | "@babel/plugin-proposal-class-properties": "^7.5.5",
14 | "@babel/plugin-transform-runtime": "^7.5.5",
15 | "@babel/preset-env": "^7.5.5",
16 | "@babel/preset-react": "^7.0.0",
17 | "@typescript-eslint/eslint-plugin": "2.x",
18 | "@typescript-eslint/parser": "2.x",
19 | "babel-eslint": "10.x",
20 | "babel-jest": "^24.9.0",
21 | "babel-plugin-dev-expression": "^0.2.2",
22 | "eslint": "6.x",
23 | "eslint-config-react-app": "^5.0.2",
24 | "eslint-plugin-flowtype": "3.x",
25 | "eslint-plugin-import": "2.x",
26 | "eslint-plugin-jsx-a11y": "6.x",
27 | "eslint-plugin-react": "7.x",
28 | "eslint-plugin-react-hooks": "1.x",
29 | "history": "^4.9.0",
30 | "husky": "^1.3.1",
31 | "jest": "^24.9.0",
32 | "jest-circus": "^24.9.0",
33 | "lerna": "^3.13.4",
34 | "lerna-changelog": "^0.8.2",
35 | "metro-react-native-babel-preset": "^0.56.0",
36 | "prettier": "^1.14.3",
37 | "pretty-quick": "^1.4.1",
38 | "raf": "^3.4.1",
39 | "react": "^16.9.0",
40 | "react-dom": "^16.9.0",
41 | "react-native": "^0.61.1",
42 | "react-test-renderer": "^16.8.3",
43 | "rollup": "^1.20.3",
44 | "rollup-plugin-babel": "^4.3.3",
45 | "rollup-plugin-commonjs": "^10.1.0",
46 | "rollup-plugin-node-resolve": "^5.2.0",
47 | "rollup-plugin-replace": "^2.2.0",
48 | "rollup-plugin-uglify": "^6.0.3"
49 | },
50 | "workspaces": {
51 | "packages": [
52 | "packages/*"
53 | ]
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/packages/react-router-native/examples/CustomLink.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { StyleSheet, Text, View } from "react-native";
3 |
4 | import { NativeRouter, Route, Link } from "react-router-native";
5 |
6 | function CustomLink({ children, to, activeOnlyWhenExact }) {
7 | return (
8 | (
12 |
13 |
14 | {match && > }
15 | {children}
16 |
17 |
18 | )}
19 | />
20 | );
21 | }
22 |
23 | function App() {
24 | return (
25 |
26 |
27 | Accounts
28 |
29 |
30 | Netflix
31 |
32 |
33 | Zillow Group
34 |
35 |
36 | Yahoo
37 |
38 |
39 | Modus Create
40 |
41 |
42 | ID: {match.params.id} }
45 | />
46 |
47 |
48 | );
49 | }
50 |
51 | const styles = StyleSheet.create({
52 | container: {
53 | marginTop: 25,
54 | padding: 10
55 | },
56 | header: {
57 | fontSize: 20
58 | },
59 | nav: {
60 | flexDirection: "row",
61 | justifyContent: "space-around"
62 | },
63 | navItem: {
64 | flex: 1,
65 | alignItems: "center",
66 | padding: 10
67 | }
68 | });
69 |
70 | export default App;
71 |
--------------------------------------------------------------------------------
/packages/react-router/docs/guides/redux.md:
--------------------------------------------------------------------------------
1 | # Deep Redux Integration
2 |
3 | Redux is an important part of the React ecosystem. We want to make the integration of React Router and Redux as seamless as possible for people wanting to use both. To that end, some folks want to:
4 |
5 | 1. Synchronize the routing data with, and accessed from, the store.
6 | 2. Be able to navigate by dispatching actions.
7 | 3. Have support for time travel debugging for route changes in the Redux devtools.
8 |
9 | All of this requires deeper integration.
10 |
11 | Our recommendation is **not to keep your routes in your Redux store at all**. Here's our reasoning:
12 |
13 | 1. Routing data is already a prop of most of your components that care about it. Whether it comes from the store or the router, your component's code is largely the same.
14 | 2. In most cases, you can use `Link`, `NavLink` and `Redirect` to perform navigation actions. Sometimes you might also need to navigate programmatically, after some asynchronous task that was originally initiated by an action. For example, you might dispatch an action when the user submits a login form. Your [thunk](https://github.com/reduxjs/redux-thunk), [saga](https://redux-saga.js.org/) or other async handler then authenticates the credentials, _then_ it needs to somehow navigate to a new page if successful. The solution here is simply to include the `history` object (provided to all route components) in the payload of the action, and your async handler can use this to navigate when appropriate.
15 | 3. Route changes are unlikely to matter for time travel debugging. The only obvious case is to debug issues with your router/store synchronization, and this problem goes away if you don't synchronize them at all.
16 |
17 | But if you feel strongly about synchronizing your routes with your store, you may want to try [Connected React Router](https://github.com/supasate/connected-react-router), a third party binding for React Router and Redux.
18 |
--------------------------------------------------------------------------------
/packages/react-router/modules/matchPath.js:
--------------------------------------------------------------------------------
1 | import pathToRegexp from "path-to-regexp";
2 |
3 | const cache = {};
4 | const cacheLimit = 10000;
5 | let cacheCount = 0;
6 |
7 | function compilePath(path, options) {
8 | const cacheKey = `${options.end}${options.strict}${options.sensitive}`;
9 | const pathCache = cache[cacheKey] || (cache[cacheKey] = {});
10 |
11 | if (pathCache[path]) return pathCache[path];
12 |
13 | const keys = [];
14 | const regexp = pathToRegexp(path, keys, options);
15 | const result = { regexp, keys };
16 |
17 | if (cacheCount < cacheLimit) {
18 | pathCache[path] = result;
19 | cacheCount++;
20 | }
21 |
22 | return result;
23 | }
24 |
25 | /**
26 | * Public API for matching a URL pathname to a path.
27 | */
28 | function matchPath(pathname, options = {}) {
29 | if (typeof options === "string" || Array.isArray(options)) {
30 | options = { path: options };
31 | }
32 |
33 | const { path, exact = false, strict = false, sensitive = false } = options;
34 |
35 | const paths = [].concat(path);
36 |
37 | return paths.reduce((matched, path) => {
38 | if (!path && path !== "") return null;
39 | if (matched) return matched;
40 |
41 | const { regexp, keys } = compilePath(path, {
42 | end: exact,
43 | strict,
44 | sensitive
45 | });
46 | const match = regexp.exec(pathname);
47 |
48 | if (!match) return null;
49 |
50 | const [url, ...values] = match;
51 | const isExact = pathname === url;
52 |
53 | if (exact && !isExact) return null;
54 |
55 | return {
56 | path, // the path used to match
57 | url: path === "/" && url === "" ? "/" : url, // the matched portion of the URL
58 | isExact, // whether or not we matched exactly
59 | params: keys.reduce((memo, key, index) => {
60 | memo[key.name] = values[index];
61 | return memo;
62 | }, {})
63 | };
64 | }, null);
65 | }
66 |
67 | export default matchPath;
68 |
--------------------------------------------------------------------------------
/packages/react-router-native/ios/ReactRouterNative/AppDelegate.m:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | #import "AppDelegate.h"
11 | #import
12 | #import
13 | #import
14 |
15 | @implementation AppDelegate
16 |
17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
18 | {
19 | NSURL *jsCodeLocation;
20 |
21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"packages/react-router-native/index.ios" fallbackResource:nil];
22 |
23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
24 | moduleName:@"ReactRouterNative"
25 | initialProperties:nil
26 | launchOptions:launchOptions];
27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
28 |
29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
30 | UIViewController *rootViewController = [UIViewController new];
31 | rootViewController.view = rootView;
32 | self.window.rootViewController = rootViewController;
33 | [self.window makeKeyAndVisible];
34 | return YES;
35 | }
36 |
37 | - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
38 | sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
39 | {
40 | return [RCTLinkingManager application:application openURL:url
41 | sourceApplication:sourceApplication annotation:annotation];
42 | }
43 |
44 | @end
45 |
--------------------------------------------------------------------------------
/packages/react-router-dom/examples/QueryParams.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | BrowserRouter as Router,
4 | Link,
5 | useLocation
6 | } from "react-router-dom";
7 |
8 | // React Router does not have any opinions about
9 | // how you should parse URL query strings.
10 | //
11 | // If you use simple key=value query strings and
12 | // you do not need to support IE 11, you can use
13 | // the browser's built-in URLSearchParams API.
14 | //
15 | // If your query strings contain array or object
16 | // syntax, you'll probably need to bring your own
17 | // query parsing function.
18 |
19 | export default function QueryParamsExample() {
20 | return (
21 |
22 |
24 | );
25 | }
26 |
27 | // A custom hook that builds on useLocation to parse
28 | // the query string for you.
29 | function useQuery() {
30 | return new URLSearchParams(useLocation().search);
31 | }
32 |
33 | function QueryParamsDemo() {
34 | let query = useQuery();
35 |
36 | return (
37 | in a as a kind of
12 | // "fallback" route, to catch 404 errors.
13 | //
14 | // There are a few useful things to note about this example:
15 | //
16 | // - A renders the first child that matches
17 | // - A may be used to redirect old URLs to new ones
18 | // - A Home
27 |
28 |
29 | Old Match, to be redirected
30 |
31 |
32 | Will Match
33 |
34 |
35 | Will Not Match
36 |
37 |
38 | Also Will Not Match
39 |
40 |
41 |
42 |
43 |
44 |
46 |
47 |
49 |
50 |
52 |
53 |
55 |
56 |
57 |
38 |
58 | );
59 | }
60 |
61 | function Child({ name }) {
62 | return (
63 |
39 |
57 | Accounts
40 |-
41 |
- 42 | Netflix 43 | 44 |
- 45 | Zillow Group 46 | 47 |
- 48 | Yahoo 49 | 50 |
- 51 | Modus Create 52 | 53 |
64 | {name ? (
65 |
66 | The
69 | ) : (
70 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/packages/react-router/docs/guides/Installation.md:
--------------------------------------------------------------------------------
1 | # Installation
2 |
3 | React Router runs in multiple environments: browsers, servers, native, and even VR (works in the dev preview!) While many components are shared (like `Route`) others are specific to environment (like `NativeRouter`). Rather than requiring you install two packages, you only have to install the package for the target environment. Any shared components between the environments are re-exported from the environment specific package.
4 |
5 | ## Web
6 |
7 | ```bash
8 | npm install react-router-dom
9 | # or
10 | yarn add react-router-dom
11 | ```
12 |
13 | All of the package modules can be imported from the top:
14 |
15 | ```js
16 | import {
17 | BrowserRouter as Router,
18 | StaticRouter, // for server rendering
19 | Route,
20 | Link
21 | // etc.
22 | } from "react-router-dom";
23 | ```
24 |
25 | ## Native
26 |
27 | We're still working on great documentation for the native capabilities of React Router. For now we recommend you [read the source](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-native).
28 |
29 | ```bash
30 | yarn add react-router-native
31 | # or if not using the react-native cli
32 | npm install react-router-native
33 | ```
34 |
35 | All of the package modules can be imported from the top:
36 |
37 | ```js
38 | import {
39 | NativeRouter as Router,
40 | DeepLinking,
41 | BackButton,
42 | Link,
43 | Route
44 | // etc.
45 | } from "react-router-native";
46 | ```
47 |
48 | ## Who-knows-where
49 |
50 | ```bash
51 | yarn add react-router
52 | # or if not using the react-native cli
53 | npm install react-router
54 | ```
55 |
56 | All of the package modules can be imported from the top:
57 |
58 | ```js
59 | import {
60 | MemoryRouter as Router,
61 | Route
62 | // etc.
63 | } from "react-router";
64 | ```
65 |
66 | You can use React Router's navigation anywhere you run React, the navigation state is kept in a memory router. You can look at the implementation of `NativeRouter` to get an idea on how to integrate.
67 |
--------------------------------------------------------------------------------
/packages/react-router-dom/examples/NoMatch.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | BrowserRouter as Router,
4 | Route,
5 | Link,
6 | Switch,
7 | Redirect,
8 | useLocation
9 | } from "react-router-dom";
10 |
11 | // You can use the last
66 | The name in the query string is "{name}
67 | "
68 |
69 | ) : (
70 | There is no name in the query string
71 | )} 72 |Home
; 63 | } 64 | 65 | function WillMatch() { 66 | returnMatched!
; 67 | } 68 | 69 | function NoMatch() { 70 | let location = useLocation(); 71 | 72 | return ( 73 |
74 |
75 | No match for
77 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/website/webpack/prismjs-loader.js:
--------------------------------------------------------------------------------
1 | /*
2 | * modified version of https://github.com/valor-software/prismjs-loader
3 | *
4 | * The MIT License (MIT)
5 | *
6 | * Copyright (c) 2015-2016 Valor Software
7 | * Copyright (c) 2015-2016 Dmitriy Shekhovtsov
75 | No match for {location.pathname}
76 |
77 | -
20 |
- 21 | Form 22 | 23 |
- 24 | One 25 | 26 |
- 27 | Two 28 | 29 |
`.
60 |
--------------------------------------------------------------------------------
/packages/react-router-dom/examples/Basic.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | BrowserRouter as Router,
4 | Switch,
5 | Route,
6 | Link
7 | } from "react-router-dom";
8 |
9 | // This site has 3 pages, all of which are rendered
10 | // dynamically in the browser (not server rendered).
11 | //
12 | // Although the page does not ever refresh, notice how
13 | // React Router keeps the URL up to date as you navigate
14 | // through the site. This preserves the browser history,
15 | // making sure things like the back button and bookmarks
16 | // work properly.
17 |
18 | export default function BasicExample() {
19 | return (
20 |
21 |
56 | );
57 | }
58 |
59 | // You can think of these components as "pages"
60 | // in your app.
61 |
62 | function Home() {
63 | return (
64 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | APPL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleURLTypes
22 |
23 |
24 | CFBundleTypeRole
25 | Editor
26 | CFBundleURLName
27 | router-demo
28 | CFBundleURLSchemes
29 |
30 | router-demo
31 |
32 |
33 |
34 | CFBundleVersion
35 | 1
36 | LSRequiresIPhoneOS
37 | NSAppTransportSecurity
39 |
40 | NSExceptionDomains
41 |
42 | localhost
43 |
44 | NSExceptionAllowsInsecureHTTPLoads
45 |
47 |
48 |
49 | NSLocationWhenInUseUsageDescription
50 | UILaunchStoryboardName
52 | LaunchScreen
53 | UIRequiredDeviceCapabilities
54 |
55 | armv7
56 |
57 | UISupportedInterfaceOrientations
58 |
59 | UIInterfaceOrientationPortrait
60 | UIInterfaceOrientationLandscapeLeft
61 | UIInterfaceOrientationLandscapeRight
62 |
63 | UIViewControllerBasedStatusBarAppearance
64 |
66 |
67 |
--------------------------------------------------------------------------------
/packages/react-router-dom/docs/api/HashRouter.md:
--------------------------------------------------------------------------------
1 | # <HashRouter>
2 |
3 | A [``](../../../react-router/docs/api/Router.md) that uses the hash portion of the URL (i.e. `window.location.hash`) to keep your UI in sync with the URL.
4 |
5 | **IMPORTANT NOTE:** Hash history does not support `location.key` or `location.state`. In previous versions we attempted to shim the behavior but there were edge-cases we couldn't solve. Any code or plugin that needs this behavior won't work. As this technique is only intended to support legacy browsers, we encourage you to configure your server to work with `` instead.
6 |
7 | ```jsx
8 |
13 |
15 | ```
16 |
17 | ## basename: string
18 |
19 | The base URL for all locations. A properly formatted basename should have a leading slash, but no trailing slash.
20 |
21 | ```jsx
22 | {
33 | // this is the default behavior
34 | const allowTransition = window.confirm(message);
35 | callback(allowTransition);
36 | }}
37 | />
38 | ```
39 |
40 | ## hashType: string
41 |
42 | The type of encoding to use for `window.location.hash`. Available values are:
43 |
44 | - `"slash"` - Creates hashes like `#/` and `#/sunshine/lollipops`
45 | - `"noslash"` - Creates hashes like `#` and `#sunshine/lollipops`
46 | - `"hashbang"` - Creates ["ajax crawlable"](https://developers.google.com/webmasters/ajax-crawling/docs/learn-more) (deprecated by Google) hashes like `#!/` and `#!/sunshine/lollipops`
47 |
48 | Defaults to `"slash"`.
49 |
50 | ## children: node
51 |
52 | A [single child element](https://facebook.github.io/react/docs/react-api.html#reactchildrenonly) to render.
53 |
--------------------------------------------------------------------------------
/packages/react-router-native/index.android.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { AppRegistry, StyleSheet, Text, View } from "react-native";
3 |
4 | import {
5 | NativeRouter,
6 | Route,
7 | Link,
8 | DeepLinking,
9 | BackButton,
10 | Prompt
11 | } from "react-router-native";
12 |
13 | class ReactRouterNative extends React.Component {
14 | render() {
15 | return (
16 |
17 |
18 | (
25 |
26 |
27 | Welcome to React Router Native!
28 |
29 |
30 |
31 | Go to "/one"
32 |
33 |
34 |
35 | )}
36 | />
37 |
38 | (
42 |
43 | ONE! {match.url}
45 |
46 | Go Back
47 |
48 |
49 | )}
50 | />
51 |
52 |
53 | );
54 | }
55 | }
56 |
57 | const styles = StyleSheet.create({
58 | container: {
59 | flex: 1,
60 | justifyContent: "center",
61 | alignItems: "center",
62 | backgroundColor: "#F5FCFF"
63 | },
64 | welcome: {
65 | fontSize: 20,
66 | textAlign: "center",
67 | margin: 10
68 | },
69 | instructions: {
70 | textAlign: "center",
71 | color: "#333333",
72 | marginBottom: 5
73 | }
74 | });
75 |
76 | AppRegistry.registerComponent("ReactRouterNative", () => ReactRouterNative);
77 |
78 | export default ReactRouterNative;
79 |
--------------------------------------------------------------------------------
/website/index.html.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React Router: Declarative Routing for React.js
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
31 |
32 |
33 |
34 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/packages/react-router-dom/examples/StaticRouter.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { StaticRouter as Router, Route } from "react-router-dom";
3 |
4 | // This example renders a route within a StaticRouter and populates its
5 | // staticContext, which it then prints out. In the real world you would
6 | // use the StaticRouter for server-side rendering:
7 | //
8 | // import express from "express";
9 | // import ReactDOMServer from "react-dom/server";
10 | //
11 | // const app = express()
12 | //
13 | // app.get('*', (req, res) => {
14 | // let staticContext = {}
15 | //
16 | // let html = ReactDOMServer.renderToString(
17 | //
18 | //
20 | // );
21 | //
22 | // res.status(staticContext.statusCode || 200).send(html);
23 | // });
24 | //
25 | // app.listen(process.env.PORT || 3000);
26 |
27 | function RouteStatus(props) {
28 | return (
29 | {
31 | // we have to check if staticContext exists
32 | // because it will be undefined if rendered through a BrowserRouter
33 | if (staticContext) {
34 | staticContext.statusCode = props.statusCode;
35 | }
36 |
37 | return
56 |
63 | );
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/packages/react-router-dom/examples/Recursive.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | BrowserRouter as Router,
4 | Switch,
5 | Route,
6 | Link,
7 | Redirect,
8 | useParams,
9 | useRouteMatch
10 | } from "react-router-dom";
11 |
12 | // Sometimes you don't know all the possible routes
13 | // for your application up front; for example, when
14 | // building a file-system browsing UI or determining
15 | // URLs dynamically based on data. In these situations,
16 | // it helps to have a dynamic router that is able
17 | // to generate routes as needed at runtime.
18 | //
19 | // This example lets you drill down into a friends
20 | // list recursively, viewing each user's friend list
21 | // along the way. As you drill down, notice each segment
22 | // being added to the URL. You can copy/paste this link
23 | // to someone else and they will see the same UI.
24 | //
25 | // Then click the back button and watch the last
26 | // segment of the URL disappear along with the last
27 | // friend list.
28 |
29 | export default function RecursiveExample() {
30 | return (
31 |
32 |
33 |
34 |
36 |
37 |
39 |
40 |
41 | );
42 | }
43 |
44 | function Person() {
45 | let { url } = useRouteMatch();
46 | let { id } = useParams();
47 | let person = find(parseInt(id));
48 |
49 | return (
50 |
16 | {context => {
17 | invariant(context, "You should not use outside a ");
18 |
19 | const { history, staticContext } = context;
20 |
21 | const method = push ? history.push : history.replace;
22 | const location = createLocation(
23 | computedMatch
24 | ? typeof to === "string"
25 | ? generatePath(to, computedMatch.params)
26 | : {
27 | ...to,
28 | pathname: generatePath(to.pathname, computedMatch.params)
29 | }
30 | : to
31 | );
32 |
33 | // When rendering in a static context,
34 | // set the new location immediately.
35 | if (staticContext) {
36 | method(location);
37 | return null;
38 | }
39 |
40 | return (
41 | {
43 | method(location);
44 | }}
45 | onUpdate={(self, prevProps) => {
46 | const prevLocation = createLocation(prevProps.to);
47 | if (
48 | !locationsAreEqual(prevLocation, {
49 | ...location,
50 | key: prevLocation.key
51 | })
52 | ) {
53 | method(location);
54 | }
55 | }}
56 | to={to}
57 | />
58 | );
59 | }}
60 |
61 | );
62 | }
63 |
64 | if (__DEV__) {
65 | Redirect.propTypes = {
66 | push: PropTypes.bool,
67 | from: PropTypes.string,
68 | to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired
69 | };
70 | }
71 |
72 | export default Redirect;
73 |
--------------------------------------------------------------------------------
/packages/react-router-native/examples/NoMatch.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { StyleSheet, Text, View } from "react-native";
3 |
4 | import {
5 | NativeRouter,
6 | Route,
7 | Link,
8 | Switch,
9 | Redirect
10 | } from "react-router-native";
11 |
12 | function Home() {
13 | return (
14 |
15 | A <Switch> renders the first child <Route> that matches. A
16 | <Route> with no "path" always matches.
17 |
18 | );
19 | }
20 |
21 | function WillMatch() {
22 | return Matched! ;
23 | }
24 |
25 | function NoMatch({ location }) {
26 | return No match for {location.pathname} ;
27 | }
28 |
29 | function App() {
30 | return (
31 |
32 |
33 |
34 |
35 | Home
36 |
37 |
38 | Old Match, to be redirected
39 |
40 |
41 | Will Match
42 |
43 |
48 | Will Not Match
49 |
50 |
55 | Also Will Not Match
56 |
57 |
58 |
59 |
64 |
65 |
66 | );
67 | }
68 |
69 | const styles = StyleSheet.create({
70 | container: {
71 | marginTop: 25,
72 | padding: 10
73 | },
74 | header: {
75 | fontSize: 20,
76 | marginTop: 20
77 | }
78 | });
79 |
80 | export default App;
81 |
--------------------------------------------------------------------------------
/packages/react-router/modules/__tests__/Prompt-test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import { createMemoryHistory as createHistory } from "history";
4 | import { MemoryRouter, Prompt, Router } from "react-router";
5 |
6 | import renderStrict from "./utils/renderStrict.js";
7 |
8 | describe("A ", () => {
9 | const node = document.createElement("div");
10 |
11 | afterEach(() => {
12 | ReactDOM.unmountComponentAtNode(node);
13 | });
14 |
15 | describe("with no message", () => {
16 | it("logs a warning to the console", () => {
17 | jest.spyOn(console, "error").mockImplementation(() => {});
18 |
19 | renderStrict(
20 |
21 | ,
23 | node
24 | );
25 |
26 | expect(console.error).toHaveBeenCalledWith(
27 | expect.stringMatching(
28 | "The prop `message` is marked as required in `Prompt`"
29 | )
30 | );
31 | });
32 | });
33 |
34 | it("calls getUserConfirmation with the prompt message", () => {
35 | const getUserConfirmation = jest.fn((message, callback) => {
36 | callback(false);
37 | });
38 |
39 | const history = createHistory({
40 | getUserConfirmation: getUserConfirmation
41 | });
42 |
43 | renderStrict(
44 |
45 | ,
47 | node
48 | );
49 |
50 | history.push("/somewhere");
51 |
52 | expect(getUserConfirmation).toHaveBeenCalledWith(
53 | expect.stringMatching("Are you sure?"),
54 | expect.any(Function)
55 | );
56 | });
57 |
58 | describe("with when=false", () => {
59 | it("does not call getUserConfirmation", () => {
60 | const getUserConfirmation = jest.fn((message, callback) => {
61 | callback(false);
62 | });
63 |
64 | const history = createHistory({
65 | getUserConfirmation: getUserConfirmation
66 | });
67 |
68 | renderStrict(
69 |
70 | ,
72 | node
73 | );
74 |
75 | history.push("/somewhere");
76 |
77 | expect(getUserConfirmation).not.toHaveBeenCalled();
78 | });
79 | });
80 | });
81 |
--------------------------------------------------------------------------------
/packages/react-router/modules/__tests__/integration-test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import { MemoryRouter, Route } from "react-router";
4 |
5 | import renderStrict from "./utils/renderStrict.js";
6 |
7 | describe("Integration Tests", () => {
8 | const node = document.createElement("div");
9 |
10 | afterEach(() => {
11 | ReactDOM.unmountComponentAtNode(node);
12 | });
13 |
14 | it("renders nested matches", () => {
15 | const TEXT1 = "Ms. Tripp";
16 | const TEXT2 = "Mrs. Schiffman";
17 |
18 | renderStrict(
19 |
20 | (
23 | ,
30 | node
31 | );
32 |
33 | expect(node.innerHTML).toContain(TEXT1);
34 | expect(node.innerHTML).toContain(TEXT2);
35 | });
36 |
37 | it("renders only as deep as the matching Route", () => {
38 | const TEXT1 = "Ms. Tripp";
39 | const TEXT2 = "Mrs. Schiffman";
40 |
41 | renderStrict(
42 |
43 | (
46 | ,
53 | node
54 | );
55 |
56 | expect(node.innerHTML).toContain(TEXT1);
57 | expect(node.innerHTML).not.toContain(TEXT2);
58 | });
59 |
60 | it("renders multiple matching routes", () => {
61 | const TEXT1 = "Mrs. Schiffman";
62 | const TEXT2 = "Mrs. Burton";
63 |
64 | renderStrict(
65 |
66 | ,
75 | node
76 | );
77 |
78 | expect(node.innerHTML).toContain(TEXT1);
79 | expect(node.innerHTML).toContain(TEXT2);
80 | });
81 | });
82 |
--------------------------------------------------------------------------------
/packages/react-router/modules/__tests__/Router-context-test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import { createMemoryHistory as createHistory } from "history";
4 | import { Router, __RouterContext as RouterContext } from "react-router";
5 |
6 | import renderStrict from "./utils/renderStrict.js";
7 |
8 | describe("A ", () => {
9 | const node = document.createElement("div");
10 |
11 | afterEach(() => {
12 | ReactDOM.unmountComponentAtNode(node);
13 | });
14 |
15 | describe("context", () => {
16 | let context;
17 | function ContextChecker() {
18 | return (
19 |
20 | {value => {
21 | context = value;
22 | return null;
23 | }}
24 |
25 | );
26 | }
27 |
28 | afterEach(() => {
29 | context = undefined;
30 | });
31 |
32 | it("has a `history` property", () => {
33 | const history = createHistory();
34 |
35 | renderStrict(
36 |
37 | ,
39 | node
40 | );
41 |
42 | expect(context.history).toBe(history);
43 | });
44 |
45 | it("has a `location` property", () => {
46 | const history = createHistory();
47 |
48 | renderStrict(
49 |
50 | ,
52 | node
53 | );
54 |
55 | expect(context.location).toBe(history.location);
56 | });
57 |
58 | it("has a `match` property", () => {
59 | const history = createHistory({
60 | initialEntries: ["/"]
61 | });
62 |
63 | renderStrict(
64 |
65 | ,
67 | node
68 | );
69 |
70 | expect(context.match).toMatchObject({
71 | path: "/",
72 | url: "/",
73 | params: {},
74 | isExact: true
75 | });
76 | });
77 |
78 | it("does not have a `staticContext` property", () => {
79 | const history = createHistory();
80 |
81 | renderStrict(
82 |
83 | ,
85 | node
86 | );
87 |
88 | expect(context.staticContext).toBe(undefined);
89 | });
90 | });
91 | });
92 |
--------------------------------------------------------------------------------
/packages/react-router/modules/__tests__/generatePath-test.js:
--------------------------------------------------------------------------------
1 | import { generatePath } from "react-router";
2 |
3 | describe("generatePath", () => {
4 | describe('with pattern="/"', () => {
5 | it("returns correct url with no params", () => {
6 | const pattern = "/";
7 | const generated = generatePath(pattern);
8 | expect(generated).toBe("/");
9 | });
10 |
11 | it("returns correct url with params", () => {
12 | const pattern = "/";
13 | const params = { foo: "tobi", bar: 123 };
14 | const generated = generatePath(pattern, params);
15 | expect(generated).toBe("/");
16 | });
17 | });
18 |
19 | describe('with pattern="/:foo/somewhere/:bar"', () => {
20 | it("throws with no params", () => {
21 | const pattern = "/:foo/somewhere/:bar";
22 | expect(() => {
23 | generatePath(pattern);
24 | }).toThrow();
25 | });
26 |
27 | it("throws with some params", () => {
28 | const pattern = "/:foo/somewhere/:bar";
29 | const params = { foo: "tobi", quux: 999 };
30 | expect(() => {
31 | generatePath(pattern, params);
32 | }).toThrow();
33 | });
34 |
35 | it("returns correct url with params", () => {
36 | const pattern = "/:foo/somewhere/:bar";
37 | const params = { foo: "tobi", bar: 123 };
38 | const generated = generatePath(pattern, params);
39 | expect(generated).toBe("/tobi/somewhere/123");
40 | });
41 |
42 | it("returns correct url with additional params", () => {
43 | const pattern = "/:foo/somewhere/:bar";
44 | const params = { foo: "tobi", bar: 123, quux: 999 };
45 | const generated = generatePath(pattern, params);
46 | expect(generated).toBe("/tobi/somewhere/123");
47 | });
48 | });
49 |
50 | describe("with no path", () => {
51 | it("matches the root URL", () => {
52 | const generated = generatePath();
53 | expect(generated).toBe("/");
54 | });
55 | });
56 |
57 | describe('simple pattern="/view/:id"', () => {
58 | it("handle = on params", () => {
59 | const pattern = "/view/:id";
60 | const params = { id: "Q29tcGxhaW50OjVhZjFhMDg0MzhjMTk1MThiMTdlOTQ2Yg==" };
61 |
62 | const generated = generatePath(pattern, params);
63 | expect(generated).toBe(
64 | "/view/Q29tcGxhaW50OjVhZjFhMDg0MzhjMTk1MThiMTdlOTQ2Yg=="
65 | );
66 | });
67 | });
68 | });
69 |
--------------------------------------------------------------------------------
22 |
35 | 36 | {/* 37 | A looks through all its children
38 | elements and renders the first one whose path
39 | matches the current URL. Use a any time
40 | you have multiple routes, but you want only one
41 | of them to render at a time
42 | */}
43 |
44 |
45 |
47 |
48 |
50 |
51 |
53 |
54 |
55 | -
23 |
- 24 | Home 25 | 26 |
- 27 | About 28 | 29 |
- 30 | Dashboard 31 | 32 |
35 | 36 | {/* 37 | A
65 |
67 | );
68 | }
69 |
70 | function About() {
71 | return (
72 | Home
66 |
73 |
75 | );
76 | }
77 |
78 | function Dashboard() {
79 | return (
80 | About
74 |
81 |
83 | );
84 | }
85 |
--------------------------------------------------------------------------------
/packages/react-router-native/ios/ReactRouterNative/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 | Dashboard
82 |{props.children}
;
38 | }}
39 | />
40 | );
41 | }
42 |
43 | function PrintContext(props) {
44 | return Static context: {JSON.stringify(props.staticContext)}
; 45 | } 46 | 47 | export default class StaticRouterExample extends Component { 48 | // This is the context object that we pass to the StaticRouter. 49 | // It can be modified by routes to provide additional information 50 | // for the server-side render 51 | staticContext = {}; 52 | 53 | render() { 54 | return ( 55 |
57 |
58 |
61 |
62 | Route with statusCode 404
59 |
51 |
62 |
63 |
65 |
66 |
67 | );
68 | }
69 |
70 | const PEEPS = [
71 | { id: 0, name: "Michelle", friends: [1, 2, 3] },
72 | { id: 1, name: "Sean", friends: [0, 3] },
73 | { id: 2, name: "Kim", friends: [0, 1, 3] },
74 | { id: 3, name: "David", friends: [1, 2] }
75 | ];
76 |
77 | function find(id) {
78 | return PEEPS.find(p => p.id === id);
79 | }
80 |
--------------------------------------------------------------------------------
/packages/react-router/modules/Redirect.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import { createLocation, locationsAreEqual } from "history";
4 | import invariant from "tiny-invariant";
5 |
6 | import Lifecycle from "./Lifecycle.js";
7 | import RouterContext from "./RouterContext.js";
8 | import generatePath from "./generatePath.js";
9 |
10 | /**
11 | * The public API for navigating programmatically with a component.
12 | */
13 | function Redirect({ computedMatch, to, push = false }) {
14 | return (
15 | {person.name}’s Friends
52 | 53 |-
54 | {person.friends.map(id => (
55 |
- 56 | {find(id).name} 57 | 58 | ))} 59 |
24 |
27 | )}
28 | />
29 | {TEXT1}
25 |{TEXT2}
} /> 26 |
47 |
50 | )}
51 | />
52 | {TEXT1}
48 |{TEXT2}
} /> 49 |
67 |
70 |
71 |
73 |
74 |