5 | Test
6 |
7 | `;
8 |
9 | exports[`A
11 |
20 |
21 | 账号
12 |-
13 |
- React Router 14 |
- LeoAshin 15 |
- justjavac 16 |
- React Training 17 |
26 |
28 | )
29 |
30 | export default ParamsExample
31 |
--------------------------------------------------------------------------------
/packages/react-router-dom/modules/__tests__/HashRouter-test.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect'
2 | import React, { PropTypes } from 'react'
3 | import ReactDOM from 'react-dom'
4 | import HashRouter from '../HashRouter'
5 |
6 | describe('A ID: {match.params.id}
27 |
11 |
14 |
15 |
16 |
17 | 14 |
23 | {match ? '> ' : ''}{label}
24 |
25 | )}/>
26 | )
27 |
28 | const Home = () => (
29 |
30 |
32 | )
33 |
34 | const About = () => (
35 | 首页
31 |
36 |
38 | )
39 |
40 | export default CustomLinkExample
41 |
--------------------------------------------------------------------------------
/packages/react-router-website/modules/components/DelegateMarkdownLinks.js:
--------------------------------------------------------------------------------
1 | import { Component, PropTypes } from 'react'
2 | import { withRouter } from 'react-router-dom'
3 |
4 | let delegate = (history) => {
5 | document.body.addEventListener('click', (e) => {
6 | let node = e.target
7 | while (node) {
8 | // document or svg has weird stuff
9 | if (typeof node.className === 'string') {
10 | if (node.className.match(/internal-link/)) {
11 | e.preventDefault()
12 | const href = node.getAttribute('href')
13 | history.push(href)
14 | break
15 | }
16 | }
17 | node = node.parentNode
18 | }
19 | })
20 | delegate = () => {}
21 | }
22 |
23 | const DelegateMarkdownLinks = withRouter(class extends Component {
24 | static propTypes = {
25 | history: PropTypes.object.isRequired,
26 | children: PropTypes.node
27 | }
28 |
29 | componentDidMount() {
30 | delegate(this.props.history)
31 | }
32 |
33 | render() {
34 | return this.props.children
35 | }
36 | })
37 |
38 | export default DelegateMarkdownLinks
39 |
--------------------------------------------------------------------------------
/packages/react-router-native/rn-cli.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const blacklist = require('react-native/packager/blacklist');
3 | const config = require('react-native/packager/rn-cli.config');
4 |
5 | const rootPackagePath = path.join(__dirname, '..', '..');
6 |
7 | config.getBlacklist = () => [
8 | new RegExp(`^${escapeRegExp(rootPackagePath)}\/node_modules(.*)`),
9 | new RegExp(`^${escapeRegExp(rootPackagePath)}\/packages\/(react-router-dom|react-router-website(-*)?)\/(.*)`),
10 | new RegExp(`^${escapeRegExp(rootPackagePath)}\/packages\/react-router-native\/node_modules\/react-router(.*)`),
11 | //new RegExp(`^${escapeRegExp(rootPackagePath)}\/packages\/react-router\/node_modules\/(.*)`),
12 | ];
13 |
14 | config.getBlacklistRE = () => blacklist(config.getBlacklist());
15 |
16 | config.getProjectRoots = () => getRoots();
17 | config.getAssetRoots = () => getRoots();
18 |
19 | function getRoots() {
20 | return [
21 | path.join(__dirname, '../../'),
22 | ];
23 | }
24 |
25 | function escapeRegExp(s) {
26 | return s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
27 | }
28 |
29 | module.exports = config;
30 |
--------------------------------------------------------------------------------
/packages/react-router-native/docs/api/NativeRouter.md:
--------------------------------------------------------------------------------
1 | # <NativeRouter>
2 |
3 | A [`关于
37 |
28 |
39 |
40 | )
41 | }
42 |
43 | export default RecursiveExample
44 |
--------------------------------------------------------------------------------
/packages/react-router/docs/api/Redirect.md:
--------------------------------------------------------------------------------
1 | # <Redirect>
2 |
3 | 渲染`{person.name} 的朋友
29 |-
30 | {person.friends.map(id => (
31 |
- 32 | 33 | {find(id).name} 34 | 35 | 36 | ))} 37 |
13 |
21 |
22 |
24 |
25 |
26 |
27 | -
14 |
- 主页 15 |
- 旧链接，会被重定向 16 |
- 这个链接可以被匹配到 17 |
- 这个链接不能被匹配到 18 |
- 这个链接也不能被匹配到 19 |
32 | <Switch> 会渲染它里面的第一个可以匹配的
33 | <Route> ，而且一个没有 path 的
34 | <Route> 会满足任何匹配。
35 |
匹配到了！
39 | 40 | const NoMatch = ({ location }) => ( 41 |
42 | 无法匹配
43 |
44 | )
45 |
46 | export default NoMatchExample
47 |
--------------------------------------------------------------------------------
/packages/react-router-website/modules/animated/Animation.js:
--------------------------------------------------------------------------------
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 | * @flow
10 | */
11 | 'use strict';
12 |
13 | export type EndResult = {finished: bool};
14 | export type EndCallback = (result: EndResult) => void;
15 | export type AnimationConfig = {
16 | isInteraction?: bool;
17 | };
18 |
19 | // Important note: start() and stop() will only be called at most once.
20 | // Once an animation has been stopped or finished its course, it will
21 | // not be reused.
22 | class Animation {
23 | __active: bool;
24 | __isInteraction: bool;
25 | __onEnd: ?EndCallback;
26 | start(
27 | fromValue: number,
28 | onUpdate: (value: number) => void,
29 | onEnd: ?EndCallback,
30 | previousAnimation: ?Animation,
31 | ): void {}
32 | stop(): void {}
33 | // Helper function for subclasses to make sure onEnd is only called once.
34 | __debouncedOnEnd(result: EndResult) {
35 | var onEnd = this.__onEnd;
36 | this.__onEnd = null;
37 | onEnd && onEnd(result);
38 | }
39 | }
40 |
41 | module.exports = Animation;
42 |
--------------------------------------------------------------------------------
/packages/react-router-dom/modules/NavLink.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react'
2 | import { Route } from 'react-router'
3 | import Link from './Link'
4 |
5 | /**
6 | * A wrapper that knows if it's "active" or not.
7 | */
8 | const NavLink = ({
9 | to,
10 | exact,
11 | strict,
12 | activeClassName,
13 | className,
14 | activeStyle,
15 | style,
16 | isActive: getIsActive,
17 | ...rest
18 | }) => (
19 | 无法匹配 {location.pathname}
43 |
12 | 来把你的 包
27 | 一层，在 里的第一个匹配对象就会被渲染出来。
28 | */}
29 |
30 |
31 |
32 |
33 |
34 |
35 | -
13 |
- About Us (static) 14 |
- Company (static) 15 |
- Kim (dynamic) 16 |
- Chris (dynamic) 17 |
About
39 | const Company = () =>Company
40 | const User = ({ match }) => ( 41 |
42 |
44 | )
45 |
46 | export default AmbiguousExample
47 |
--------------------------------------------------------------------------------
/packages/react-router-website/modules/components/API.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { Redirect } from 'react-router-dom'
3 | import { Block } from 'jsxstyle'
4 | import ScrollToDoc from './ScrollToDoc'
5 | import MarkdownViewer from './MarkdownViewer'
6 |
7 | // nearly identical to Guide, haven't taken the time to abstact cause I'm not sure it'll
8 | // remain so identical ... maybe it will?
9 | class API 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 { params: { mod, header: headerParam, environment } } = match
18 | const doc = mod && data.api.find(doc => mod === doc.title.slug)
19 | const header = doc && headerParam ? doc.headers.find(h => h.slug === headerParam) : null
20 | return (
21 | User: {match.params.user}
43 |
11 |
18 | 19 |
20 |
21 |
22 |
23 | -
12 |
- 首页 13 |
- 关于 14 |
- 主题列表 15 |
18 | 19 |
28 |
30 | )
31 |
32 | const About = () => (
33 | 首页
29 |
34 |
36 | )
37 |
38 | const Topics = ({ match }) => (
39 | 关于
35 |
40 |
60 | (
61 |
64 | )
65 |
66 | const Topic = ({ match }) => (
67 | 主题列表
41 |-
42 |
- 43 | 44 | 使用 React 渲染 45 | 46 | 47 |
- 48 | 49 | 组件 50 | 51 | 52 |
- 53 | 54 | 属性 v. 状态 55 | 56 | 57 |
请选择一个主题。
62 | )}/> 63 |
68 |
70 | )
71 |
72 | export default BasicExample
73 |
--------------------------------------------------------------------------------
/packages/react-router-native/android/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 | {match.params.topicId}
69 |You are now at {location.pathname}
23 | )
24 | }
25 | }
26 |
27 | // Create a new component that is "connected" (to borrow redux
28 | // terminology) to the router.
29 | const ShowTheLocationWithRouter = withRouter(ShowTheLocation)
30 | ```
31 |
32 | #### 重要提醒
33 |
34 | If you are using `withRouter` to prevent updates from being blocked by `shouldComponentUpdate`, it is important that `withRouter` wraps the component that implements `shouldComponentUpate`. For example, when using Redux:
35 | 如果你正在使用
36 | ```js
37 | // This gets around shouldComponentUpdate
38 | withRouter(connect(...)(MyComponent)
39 |
40 | // This does not
41 | connect(...)(withRouter(MyComponent))
42 | ```
43 |
44 | See [this guide](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md) for more information.
45 |
--------------------------------------------------------------------------------
/packages/react-router-website/modules/animated/AnimatedTracking.js:
--------------------------------------------------------------------------------
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 | * @flow
10 | */
11 | 'use strict';
12 |
13 | var Animated = require('./Animated');
14 | var AnimatedValue = require('./AnimatedValue');
15 |
16 | import type { EndCallback } from './Animated';
17 |
18 | class AnimatedTracking extends Animated {
19 | _value: AnimatedValue;
20 | _parent: Animated;
21 | _callback: ?EndCallback;
22 | _animationConfig: Object;
23 | _animationClass: any;
24 |
25 | constructor(
26 | value: AnimatedValue,
27 | parent: Animated,
28 | animationClass: any,
29 | animationConfig: Object,
30 | callback?: ?EndCallback,
31 | ) {
32 | super();
33 | this._value = value;
34 | this._parent = parent;
35 | this._animationClass = animationClass;
36 | this._animationConfig = animationConfig;
37 | this._callback = callback;
38 | this.__attach();
39 | }
40 |
41 | __getValue(): Object {
42 | return this._parent.__getValue();
43 | }
44 |
45 | __attach(): void {
46 | this._parent.__addChild(this);
47 | }
48 |
49 | __detach(): void {
50 | this._parent.__removeChild(this);
51 | }
52 |
53 | update(): void {
54 | this._value.animate(new this._animationClass({
55 | ...this._animationConfig,
56 | toValue: (this._animationConfig.toValue: any).__getValue(),
57 | }), this._callback);
58 | }
59 | }
60 |
61 | module.exports = AnimatedTracking;
62 |
--------------------------------------------------------------------------------
/packages/react-router-website/modules/animated/targets/react-dom.js:
--------------------------------------------------------------------------------
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 | * @flow
10 | */
11 | 'use strict';
12 |
13 | var CSSPropertyOperations = require('react-dom/lib/CSSPropertyOperations');
14 | var Animated = require('../');
15 |
16 | // { scale: 2 } => 'scale(2)'
17 | function mapTransform(t) {
18 | var k = Object.keys(t)[0];
19 | return `${k}(${t[k]})`;
20 | }
21 |
22 | // NOTE(lmr):
23 | // Since this is a hot code path, right now this is mutative...
24 | // As far as I can tell, this shouldn't cause any unexpected behavior.
25 | function mapStyle(style) {
26 | if (style && style.transform && typeof style.transform !== 'string') {
27 | // TODO(lmr): this doesn't attempt to use vendor prefixed styles
28 | style.transform = style.transform.map(mapTransform).join(' ');
29 | }
30 | return style;
31 | }
32 |
33 | function ApplyAnimatedValues(instance, props, comp) {
34 | if (instance.setNativeProps) {
35 | instance.setNativeProps(props);
36 | } else if (instance.nodeType && instance.setAttribute !== undefined) {
37 | CSSPropertyOperations.setValueForStyles(instance, mapStyle(props.style), comp._reactInternalInstance);
38 | } else {
39 | return false;
40 | }
41 | }
42 |
43 | Animated
44 | .inject
45 | .ApplyAnimatedValues(ApplyAnimatedValues);
46 |
47 | module.exports = {
48 | ...Animated,
49 | div: Animated.createAnimatedComponent('div'),
50 | span: Animated.createAnimatedComponent('span'),
51 | img: Animated.createAnimatedComponent('img'),
52 | };
53 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/packages/react-router-native/examples/CustomLink.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { StyleSheet, Text, View } from 'react-native'
3 | import { NativeRouter, Route, Link } from 'react-router-native'
4 |
5 | const CustomLink = ({ children, to, activeOnlyWhenExact }) => (
6 |
12 |
18 |
21 | -
13 |
- 表单 14 |
- 页面 1 15 |
- 页面 2 16 |
页面 1
}/> 19 |页面 2
}/> 20 |主页
15 | 16 | const Redbull = () =>红牛
17 | 18 | const Snacks = ({ routes }) => ( 19 |
20 |
30 | )
31 |
32 | const Spicy = () => 小吃
21 |-
22 |
- 辣条 23 |
- 薯片 24 |
辣条
33 | const Chips = () =>薯片
34 | 35 | //////////////////////////////////////////////////////////// 36 | // 这里是路由的配置。 37 | const routes = [ 38 | { path: '/redbull', 39 | component: Redbull 40 | }, 41 | { path: '/snacks', 42 | component: Snacks, 43 | routes: [ 44 | { path: '/snacks/spicy', 45 | component: Spicy 46 | }, 47 | { path: '/snacks/chips', 48 | component: Chips 49 | } 50 | ] 51 | } 52 | ] 53 | 54 | // 把
66 |
75 | -
67 |
- 小吃 68 |
- 红牛 69 |
主页!
,
15 | main: () => 主页
16 | }, 17 | { path: '/about', 18 | sidebar: () =>关于我们!
,
19 | main: () => 关于我们
20 | }, 21 | { path: '/contact', 22 | sidebar: () =>联系我们!
,
23 | main: () => 联系我们
24 | } 25 | ] 26 | 27 | const SidebarExample = () => ( 28 |
30 |
69 |
35 | ，这些 都能正常渲染，
43 | // 只要你的 URL 是匹配的。也就是说在一个给定的 URL 下，渲染多个组件
44 | // （例如 sidebar 或者是 breadcrumb），不管组件是什么，只要放入多个
45 | // 组件，就可以被正常渲染出来。
46 |
47 |
55 |
56 | -
36 |
- 主页 37 |
- 关于我们 38 |
- 联系我们 39 |
57 | {routes.map((route, index) => (
58 | // 像上面这样在一个给定的路径下渲染多个 ，而且每个
59 | // 的 component 属性都不相同。
60 |
68 |