├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── book.json ├── docs ├── About.md ├── FAQ.md ├── Feedback.md ├── GLOSSARY.md ├── Histories.md ├── HowToStart.md ├── README.md ├── Resources.md ├── SUMMARY.md ├── StackOverflowQuestions.md ├── ThingsTheDocsAreMissing.md ├── Troubleshooting.md ├── api │ ├── Histories.md │ ├── IndexLink.md │ ├── IndexRedirect.md │ ├── IndexRoute.md │ ├── Link.md │ ├── Mixins.md │ ├── PlainRoute.md │ ├── PropTypes.md │ ├── README.md │ ├── Redirect.md │ ├── Route.md │ ├── RouteComponents.md │ ├── Router.md │ ├── RouterContext.md │ ├── RoutingContext.md │ ├── createRoutes.md │ ├── match.md │ └── useRoutes.md └── guides │ ├── CodeSplitting.md │ ├── DataFetching.md │ ├── ExampleApp.md │ ├── HashtagInUrl.md │ ├── NamedComponents.md │ ├── NavigateOutsideComponents.md │ ├── NotFound.md │ ├── PassingPropsRouteComponent.md │ ├── RouteTransitions.md │ ├── ServerRendering.md │ ├── UsageWithFlux.md │ ├── UsageWithRedux.md │ ├── UsageWithRelay.md │ ├── UsageWithWebpack.md │ └── WritingTests.md ├── package.json └── playground ├── .babelrc ├── .eslintrc ├── README.md ├── index.html ├── package.json ├── server.js ├── src ├── app.js └── main.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE 2 | _book 3 | node_modules 4 | *.log 5 | etc 6 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Thanks for helping, I really appraciate it! 2 | 3 | As I explained in the main README, I switched off the GH issues for my own productivity. 4 | 5 | **But I absolutely don't want to discourage newcomers from contributing**. Not so long ago I was a newbie to the open source. 6 | 7 | If you want to help, please send the PR with suggested: fixes, additions or if you want me to help you with something. 8 | 9 | ### But how do I create a PR? 10 | 11 | There are quite a few resources which can help you. I found these very useful: 12 | 13 | - [How to contribute to an open source project on Github](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github) - in my opinion this is the best intro if you want to start contributing to any OSS project. Kudos to [Kent C. Dodds](https://github.com/kentcdodds), who did a great job with explaining things in a very simple way. 14 | - [Proposing changes to a project with pull requests - Github docs](https://help.github.com/articles/proposing-changes-to-a-project-with-pull-requests/) 15 | - [Making a pull request - Atlassian tutorial](https://www.atlassian.com/git/tutorials/making-a-pull-request) 16 | 17 | Or you can check other resources: http://bfy.tw/50SO 18 | 19 | If you still find yourself struggling with contributing probably my explanation wasn't the best, ping me on [Twitter](https://twitter.com/matzatorski). 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Mateusz Zatorski 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 34 | 35 | 36 | 37 | ## Steps to reproduce 38 | 39 | ## Expected Behavior 40 | 41 | ## Actual Behavior 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | React Router Docs 2 | === 3 | 4 | Read the unofficial docs here : [http://knowbody.github.io/react-router-docs/](http://knowbody.github.io/react-router-docs/) 5 | 6 | **Note: This is work in progress. Please use the [main docs](https://github.com/reactjs/react-router/tree/master/docs) as this ones can contain mistakes. At some point once we feel that these docs are good I'd like them to be merged to the main repo. Feel free to contribute, point out mistakes and things which the docs are lacking.** 7 | 8 | *As there is quite a few talks about the docs not being very accesible this is my attempt to improve them. I will reuse some of the docs from the [main repo](https://github.com/reactjs/react-router/tree/master/docs) and also add the missing parts here.* 9 | 10 | ### Need help with React Router 11 | 12 | To get help with React Router I highly recommend using [StackOverflow](http://stackoverflow.com/tags/react-router/) or [Reactiflux](http://www.reactiflux.com/), these are the places where React Router community hangs out and where you get help quickly. 13 | 14 | **BUT...** 15 | 16 | This is my personal repo and I want to try out something *experimental*. 17 | 18 | As one of the maintainers I get quite a few emails, private messages on Twitter, Discord, etc. I don't mind them and I always try to help whenever I have some free time. 19 | 20 | So I want you to use this repo instead and I will try to help here. 21 | 22 | #### How 23 | 24 | I added the `playground` folder where you can play around with the React Router. And if you need help use it as a boilerplate to replicate your issue and send the PR. 25 | **Make sure that the PR title includes: `[Help needed] Your title`** 26 | 27 | #### Why 28 | 29 | I do this so others can look into the problem and the solution and also because I will be able to see what issues are mentioned the most so I can include examples in the new docs. 30 | 31 | #### Important 32 | 33 | To be very productive I switched off GH issues. As I said I'm experimenting here and I think this is going to make me productive. 34 | 35 | ##### Tldr; 36 | - want to help with docs - send the PR with the new additions 37 | - found a mistake - send the PR with the fix 38 | - need help with your project - send the PR using the `playground` boilerplate 39 | 40 | 41 | Here is a longer explanation: https://gist.github.com/ryanflorence/8a62abea562ca2896dee 42 | -------------------------------------------------------------------------------- /book.json: -------------------------------------------------------------------------------- 1 | { 2 | "gitbook": "3.0.0-pre.5", 3 | "root": "./docs", 4 | "plugins": [ 5 | "prism", 6 | "-highlight", 7 | "theme-official", 8 | "edit-link", 9 | "github", 10 | "anker-enable", 11 | "jsfiddle" 12 | ], 13 | "pluginsConfig": { 14 | "edit-link": { 15 | "base": "https://github.com/knowbody/react-router-docs/tree/master/docs", 16 | "label": "" 17 | }, 18 | "github": { 19 | "url": "https://github.com/knowbody/react-router-docs/tree/master/docs" 20 | }, 21 | "jsfiddle":{ 22 | "type": "frame", 23 | "tabs": ["result"], 24 | "height": "500", 25 | "width": "100%" 26 | }, 27 | "sharing": { 28 | "facebook": false, 29 | "twitter": false, 30 | "all": [ 31 | "facebook", "twitter" 32 | ] 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /docs/About.md: -------------------------------------------------------------------------------- 1 | # About 2 | 3 | ### What React Router is 4 | 5 | React Router helps you organise your applications based on (nested) URLs. 6 | 7 | This offers many advantages: 8 | 9 | - Explicit views declarations: instantly understand what are your app views 10 | - Restore any view + state with a simple URL (deep-linking) 11 | - Nested views: react-router handle nested views and their progressive resolution 12 | - History: User can navigate backward/forward and restore state 13 | - Views transitions: automatic CSS transitions when navigating 14 | - Standardized app structure and behaviour, useful when working in a team 15 | 16 | By organising your code in such a standard way, it helps you keep a sane codebase, where your views are truly independant from the context. 17 | 18 | You can find a few useful react-router [example apps](https://github.com/reactjs/react-router/tree/master/examples) on the official react-router repo. 19 | 20 | ### What React Router isn't 21 | 22 | React router doesnt handle data-fetching, you have to use [async-props](https://github.com/ryanflorence/async-props) or other classical React data fetching mechanism. 23 | 24 | ### Alternatives 25 | 26 | - https://github.com/andreypopp/rrouter 27 | -------------------------------------------------------------------------------- /docs/FAQ.md: -------------------------------------------------------------------------------- 1 | # FAQ 2 | 3 | Use questions from SO and other and explain with examples 4 | -------------------------------------------------------------------------------- /docs/Feedback.md: -------------------------------------------------------------------------------- 1 | # Feedback 2 | 3 | We'd love to hear from you! If there is anything that we can do better let us know. 4 | You can post feature requests and bug reports on [Product Pains](https://productpains.com/product/react-router). 5 | Or *help us* make it better! 6 | 7 | #### We appreciate feedback from the community. 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/GLOSSARY.md: -------------------------------------------------------------------------------- 1 | # Glossary 2 | -------------------------------------------------------------------------------- /docs/Histories.md: -------------------------------------------------------------------------------- 1 | # Histories 2 | 3 | ### What is [History](https://github.com/mjackson/history)? Why does React Router need it? 4 | 5 | History is an API which helps to manage history stack, navigate, confirm navigation and persist state between 6 | 7 | ### Type of Histories 8 | -------------------------------------------------------------------------------- /docs/HowToStart.md: -------------------------------------------------------------------------------- 1 | # How to start with React Router 2 | 3 | If you are new to the React Router you should check out the [React Router tutorial](https://github.com/reactjs/react-router-tutorial). It is a great resource and will help you get you started. 4 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # React Router 2 | 3 | ### These are unofficial React Router docs 4 | That means that the docs might contain errors, please use the [official docs](https://github.com/reactjs/react-router/tree/master/docs). 5 | Feel free to help out, just send the PR with suggested changes. 6 | Once the docs are good enough they might be merged in to the main React Router repo. 7 | 8 | 9 | ### These docs cover React Router v2.x.x 10 | 11 | ## There will be live examples 12 | 13 | [source code](https://jsfiddle.net/knowbody/6ou1kcdw/2/) 14 | 15 | 16 | ## About 17 | 18 | React Router is a powerful routing library built on top of [React](https://facebook.github.io/react/) that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what's being displayed on the page. 19 | -------------------------------------------------------------------------------- /docs/Resources.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | It's been a while since the first release of the React Router. Here is the list of great resources which will help you to even better understand and use the React Router to its full potential: 4 | 5 | ### Blog posts 6 | - [Leveling Up With React: React Router](https://css-tricks.com/learning-react-router/) 7 | 8 | 9 | ### Videos 10 | - [Getting Started with React Router](https://egghead.io/series/getting-started-with-react-router) 11 | -------------------------------------------------------------------------------- /docs/SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Table of Contents 2 | 3 | * [React Router Documentation](README.md) 4 | * Introduction 5 | * [What React Router is/isn't](About.md) 6 | * [How to get started](HowToStart.md) 7 | * Guides 8 | * [Navigate Outside Components](/guides/NavigateOutsideComponents.md) 9 | * [Client side "404 not found"](/guides/NotFound.md) 10 | * [Data Fetching (todo)](/guides/DataFetching.md) 11 | * [Server Rendering (todo)](/guides/ServerRendering.md) 12 | * [Hashtag in the URL (todo)](/guides/HashtagInUrl.md) 13 | * [Writing Tests (todo)](/guides/WritingTests.md) 14 | * [Passing `props` to Route component (todo)](/guides/PassingPropsRouteComponent.md) 15 | * [Code Splitting (todo)](/guides/CodeSplitting.md) 16 | * [Usage with Webpack (todo)](/guides/UsageWithWebpack.md) 17 | * [Usage with Redux (todo)](/guides/UsageWithRedux.md) 18 | * [Usage with Relay (todo)](/guides/UsageWithRelay.md) 19 | * [Usage with Flux (todo)](/guides/UsageWithFlux.md) 20 | * [Named Components (todo)](/guides/NamedComponents.md) 21 | * [Route Transitions (todo)](/guides/RouteTransitions.md) 22 | * [Building an app with Router (todo)](/guides/ExampleApp.md) 23 | * [Histories (todo)](Histories.md) 24 | * [API Reference](/api/README.md) 25 | * Components 26 | * [``](/api/Router.md) 27 | * [``](/api/Link.md) 28 | * [``](/api/IndexLink.md) 29 | * [``](/api/RouterContext.md) 30 | * [`context.router`](/api/RouterContext.md#contextrouter) 31 | * [`` (deprecated)](/api/RoutingContext.md) 32 | * [``](/api/Route.md) 33 | * [Plain Route](/api/PlainRoute.md) 34 | * [``](/api/Redirect.md) 35 | * [``](/api/IndexRoute.md) 36 | * [``](/api/IndexRedirect.md) 37 | * [Route Components](/api/RouteComponents.md) 38 | * [Histories](/api/Histories.md) 39 | * Utilities 40 | * [`match()`](/api/match.md) 41 | * [`createRoutes()`](/api/createRoutes.md) 42 | * [`PropTypes`](/api/PropTypes.md) 43 | * [`useRoutes` (deprecated)](/api/useRoutes.md) 44 | * [Mixins (deprecated)](/api/Mixins.md) 45 | * [StackOverflow Questions](StackOverflowQuestions.md) 46 | * [Glossary (todo)](GLOSSARY.md) 47 | * [Troubleshooting (todo)](Troubleshooting.md) 48 | * [FAQ (todo)](FAQ.md) 49 | * [Feedback](Feedback.md) 50 | -------------------------------------------------------------------------------- /docs/StackOverflowQuestions.md: -------------------------------------------------------------------------------- 1 | ### Most voted questions 2 | 3 | 1. Programmatically navigate using react router **votes: 58**, *views: 21189* [http://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router](http://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) 4 | 5 | 2. react-router - pass props to handler component **votes: 55**, *views: 25883* [http://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component](http://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component) 6 | 7 | 3. Client Routing (using react-router) and Server-Side Routing **votes: 51**, *views: 21921* [http://stackoverflow.com/questions/28553904/client-routing-using-react-router-and-server-side-routing](http://stackoverflow.com/questions/28553904/client-routing-using-react-router-and-server-side-routing) 8 | 9 | 4. How to stop /#/ in browser with react-router? **votes: 47**, *views: 24636* [http://stackoverflow.com/questions/25086832/how-to-stop-in-browser-with-react-router](http://stackoverflow.com/questions/25086832/how-to-stop-in-browser-with-react-router) 10 | 11 | 5. How to allow for webpack-dev-server to allow entry points from react-router **votes: 34**, *views: 22711* [http://stackoverflow.com/questions/26203725/how-to-allow-for-webpack-dev-server-to-allow-entry-points-from-react-router](http://stackoverflow.com/questions/26203725/how-to-allow-for-webpack-dev-server-to-allow-entry-points-from-react-router) 12 | 13 | 6. TypeError when using React: Cannot read property 'firstChild' of undefined **votes: 24**, *views: 9789* [http://stackoverflow.com/questions/27153166/typeerror-when-using-react-cannot-read-property-firstchild-of-undefined](http://stackoverflow.com/questions/27153166/typeerror-when-using-react-cannot-read-property-firstchild-of-undefined) 14 | 15 | 7. Firing Redux actions in response to route transitions in React Router **votes: 23**, *views: 7334* [http://stackoverflow.com/questions/31268740/firing-redux-actions-in-response-to-route-transitions-in-react-router](http://stackoverflow.com/questions/31268740/firing-redux-actions-in-response-to-route-transitions-in-react-router) 16 | 17 | 8. React-router urls don't work when refreshing or writting manually **votes: 23**, *views: 10801* [http://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writting-manually](http://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writting-manually) 18 | 19 | 9. React-router: type.toUpperCase is not a function **votes: 17**, *views: 9227* [http://stackoverflow.com/questions/30868539/react-router-type-touppercase-is-not-a-function](http://stackoverflow.com/questions/30868539/react-router-type-touppercase-is-not-a-function) 20 | 21 | 10. react-router : run is not a function **votes: 16**, *views: 6780* [http://stackoverflow.com/questions/32682854/react-router-run-is-not-a-function](http://stackoverflow.com/questions/32682854/react-router-run-is-not-a-function) 22 | 23 | 11. Getting query parameters from react-router hash fragment **votes: 16**, *views: 10483* [http://stackoverflow.com/questions/29852998/getting-query-parameters-from-react-router-hash-fragment](http://stackoverflow.com/questions/29852998/getting-query-parameters-from-react-router-hash-fragment) 24 | 25 | 12. Is var { Route, Redirect, RouteHandler, Link } = Router; valid in Javascript? **votes: 16**, *views: 1621* [http://stackoverflow.com/questions/27136394/is-var-route-redirect-routehandler-link-router-valid-in-javascript](http://stackoverflow.com/questions/27136394/is-var-route-redirect-routehandler-link-router-valid-in-javascript) 26 | 27 | 13. react-router Uncaught TypeError: Cannot read property 'toUpperCase' of undefined **votes: 15**, *views: 5773* [http://stackoverflow.com/questions/30990726/react-router-uncaught-typeerror-cannot-read-property-touppercase-of-undefined](http://stackoverflow.com/questions/30990726/react-router-uncaught-typeerror-cannot-read-property-touppercase-of-undefined) 28 | 29 | 14. How to use normal anchor links with react-router **votes: 15**, *views: 4381* [http://stackoverflow.com/questions/28893855/how-to-use-normal-anchor-links-with-react-router](http://stackoverflow.com/questions/28893855/how-to-use-normal-anchor-links-with-react-router) 30 | 31 | 15. react-router dynamic segments crash when accessed **votes: 14**, *views: 1866* [http://stackoverflow.com/questions/28253162/react-router-dynamic-segments-crash-when-accessed](http://stackoverflow.com/questions/28253162/react-router-dynamic-segments-crash-when-accessed) 32 | 33 | 16. Nested routes in react-router **votes: 14**, *views: 7786* [http://stackoverflow.com/questions/27612765/nested-routes-in-react-router](http://stackoverflow.com/questions/27612765/nested-routes-in-react-router) 34 | 35 | 17. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object **votes: 13**, *views: 8343* [http://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string](http://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string) 36 | 37 | 18. Trigger transition to do replaceState rather than pushState **votes: 13**, *views: 513* [http://stackoverflow.com/questions/31619108/trigger-transition-to-do-replacestate-rather-than-pushstate](http://stackoverflow.com/questions/31619108/trigger-transition-to-do-replacestate-rather-than-pushstate) 38 | 39 | 19. How to set the DefaultRoute to another Route in React Router **votes: 13**, *views: 6611* [http://stackoverflow.com/questions/29552601/how-to-set-the-defaultroute-to-another-route-in-react-router](http://stackoverflow.com/questions/29552601/how-to-set-the-defaultroute-to-another-route-in-react-router) 40 | 41 | 20. Transition to another route on successful async redux action **votes: 12**, *views: 2793* [http://stackoverflow.com/questions/32612418/transition-to-another-route-on-successful-async-redux-action](http://stackoverflow.com/questions/32612418/transition-to-another-route-on-successful-async-redux-action) 42 | 43 | 21. How to update ReactJS component based on URL / path with React-Router **votes: 12**, *views: 14947* [http://stackoverflow.com/questions/26350107/how-to-update-reactjs-component-based-on-url-path-with-react-router](http://stackoverflow.com/questions/26350107/how-to-update-reactjs-component-based-on-url-path-with-react-router) 44 | 45 | 22. Redux; accessing other parts of the state when using composed reducers via combineReducers **votes: 11**, *views: 1093* [http://stackoverflow.com/questions/33805063/redux-accessing-other-parts-of-the-state-when-using-composed-reducers-via-combi](http://stackoverflow.com/questions/33805063/redux-accessing-other-parts-of-the-state-when-using-composed-reducers-via-combi) 46 | 47 | 23. React-Router : What is the purpose of IndexRoute? **votes: 11**, *views: 2396* [http://stackoverflow.com/questions/32706913/react-router-what-is-the-purpose-of-indexroute](http://stackoverflow.com/questions/32706913/react-router-what-is-the-purpose-of-indexroute) 48 | 49 | 24. Async data flow in React App with Redux + ReactRouter? **votes: 10**, *views: 391* [http://stackoverflow.com/questions/34392988/async-data-flow-in-react-app-with-redux-reactrouter](http://stackoverflow.com/questions/34392988/async-data-flow-in-react-app-with-redux-reactrouter) 50 | 51 | 25. Server side rendering with react, react-router, and express **votes: 10**, *views: 6008* [http://stackoverflow.com/questions/30626410/server-side-rendering-with-react-react-router-and-express](http://stackoverflow.com/questions/30626410/server-side-rendering-with-react-react-router-and-express) 52 | 53 | 26. Automatic redirect after login with react-router **votes: 10**, *views: 13110* [http://stackoverflow.com/questions/29594720/automatic-redirect-after-login-with-react-router](http://stackoverflow.com/questions/29594720/automatic-redirect-after-login-with-react-router) 54 | 55 | 27. React-router error: super expression must either be null or a function **votes: 10**, *views: 6888* [http://stackoverflow.com/questions/29452111/react-router-error-super-expression-must-either-be-null-or-a-function](http://stackoverflow.com/questions/29452111/react-router-error-super-expression-must-either-be-null-or-a-function) 56 | 57 | 28. React router - Update URL hash without re-rendering page **votes: 10**, *views: 7722* [http://stackoverflow.com/questions/26239154/react-router-update-url-hash-without-re-rendering-page](http://stackoverflow.com/questions/26239154/react-router-update-url-hash-without-re-rendering-page) 58 | 59 | 29. react-router not waiting for animation before changing route **votes: 9**, *views: 344* [http://stackoverflow.com/questions/32494034/react-router-not-waiting-for-animation-before-changing-route](http://stackoverflow.com/questions/32494034/react-router-not-waiting-for-animation-before-changing-route) 60 | 61 | 30. webpack-dev-server react-router push state **votes: 9**, *views: 1399* [http://stackoverflow.com/questions/28923313/webpack-dev-server-react-router-push-state](http://stackoverflow.com/questions/28923313/webpack-dev-server-react-router-push-state) 62 | 63 | 31. ReactJS server side async for search engines **votes: 8**, *views: 106* [http://stackoverflow.com/questions/36135427/reactjs-server-side-async-for-search-engines](http://stackoverflow.com/questions/36135427/reactjs-server-side-async-for-search-engines) 64 | 65 | 32. Express status 404 with react-router **votes: 8**, *views: 277* [http://stackoverflow.com/questions/35524117/express-status-404-with-react-router](http://stackoverflow.com/questions/35524117/express-status-404-with-react-router) 66 | 67 | 33. React router navigation does not work **votes: 8**, *views: 310* [http://stackoverflow.com/questions/34867819/react-router-navigation-does-not-work](http://stackoverflow.com/questions/34867819/react-router-navigation-does-not-work) 68 | 69 | 34. How should I update redux store during a react-router transition? **votes: 8**, *views: 296* [http://stackoverflow.com/questions/34444154/how-should-i-update-redux-store-during-a-react-router-transition](http://stackoverflow.com/questions/34444154/how-should-i-update-redux-store-during-a-react-router-transition) 70 | 71 | 35. goBack() taking me all the way to first entry instead of where I want to be **votes: 8**, *views: 199* [http://stackoverflow.com/questions/34024567/goback-taking-me-all-the-way-to-first-entry-instead-of-where-i-want-to-be](http://stackoverflow.com/questions/34024567/goback-taking-me-all-the-way-to-first-entry-instead-of-where-i-want-to-be) 72 | 73 | 36. How to dispatch actions from Child components three level down? **votes: 8**, *views: 633* [http://stackoverflow.com/questions/33244324/how-to-dispatch-actions-from-child-components-three-level-down](http://stackoverflow.com/questions/33244324/how-to-dispatch-actions-from-child-components-three-level-down) 74 | 75 | 37. How to pass redux state to sub routes? **votes: 8**, *views: 831* [http://stackoverflow.com/questions/33236002/how-to-pass-redux-state-to-sub-routes](http://stackoverflow.com/questions/33236002/how-to-pass-redux-state-to-sub-routes) 76 | 77 | 38. react-router link not receiving router in context **votes: 8**, *views: 1557* [http://stackoverflow.com/questions/30947518/react-router-link-not-receiving-router-in-context](http://stackoverflow.com/questions/30947518/react-router-link-not-receiving-router-in-context) 78 | 79 | 39. React-router: How to manually invoke Link? **votes: 8**, *views: 8603* [http://stackoverflow.com/questions/29244731/react-router-how-to-manually-invoke-link](http://stackoverflow.com/questions/29244731/react-router-how-to-manually-invoke-link) 80 | 81 | 40. React router modal-only routes **votes: 8**, *views: 1164* [http://stackoverflow.com/questions/28795085/react-router-modal-only-routes](http://stackoverflow.com/questions/28795085/react-router-modal-only-routes) 82 | 83 | 41. React-router: `` does't trigger navigation change **votes: 7**, *views: 156* [http://stackoverflow.com/questions/35348284/react-router-link-to-doest-trigger-navigation-change](http://stackoverflow.com/questions/35348284/react-router-link-to-doest-trigger-navigation-change) 84 | 85 | 42. Handling User Authentication via Redux and Redux Router **votes: 7**, *views: 1313* [http://stackoverflow.com/questions/34160157/handling-user-authentication-via-redux-and-redux-router](http://stackoverflow.com/questions/34160157/handling-user-authentication-via-redux-and-redux-router) 86 | 87 | 43. How to organize state with redux and react-router? **votes: 7**, *views: 1340* [http://stackoverflow.com/questions/33205364/how-to-organize-state-with-redux-and-react-router](http://stackoverflow.com/questions/33205364/how-to-organize-state-with-redux-and-react-router) 88 | 89 | 44. React Router Authorization **votes: 7**, *views: 3126* [http://stackoverflow.com/questions/32898264/react-router-authorization](http://stackoverflow.com/questions/32898264/react-router-authorization) 90 | 91 | 45. Passing props to React Router children routes **votes: 7**, *views: 2419* [http://stackoverflow.com/questions/31862839/passing-props-to-react-router-children-routes](http://stackoverflow.com/questions/31862839/passing-props-to-react-router-children-routes) 92 | 93 | 46. Using react-router with typescript **votes: 7**, *views: 1901* [http://stackoverflow.com/questions/31747900/using-react-router-with-typescript](http://stackoverflow.com/questions/31747900/using-react-router-with-typescript) 94 | 95 | 47. How to Handle Post Request in Isomorphic React + React Router Application **votes: 7**, *views: 2096* [http://stackoverflow.com/questions/31079158/how-to-handle-post-request-in-isomorphic-react-react-router-application](http://stackoverflow.com/questions/31079158/how-to-handle-post-request-in-isomorphic-react-react-router-application) 96 | 97 | 48. Using react-router without JSX **votes: 7**, *views: 1814* [http://stackoverflow.com/questions/26766241/using-react-router-without-jsx](http://stackoverflow.com/questions/26766241/using-react-router-without-jsx) 98 | 99 | 49. react-router: need a easy way to fetch current component and name serverside **votes: 6**, *views: 76* [http://stackoverflow.com/questions/34130548/react-router-need-a-easy-way-to-fetch-current-component-and-name-serverside](http://stackoverflow.com/questions/34130548/react-router-need-a-easy-way-to-fetch-current-component-and-name-serverside) 100 | 101 | 50. React + Redux-router = Uncaught Error: Expected the reducer to be a function **votes: 6**, *views: 820* [http://stackoverflow.com/questions/34106975/react-redux-router-uncaught-error-expected-the-reducer-to-be-a-function](http://stackoverflow.com/questions/34106975/react-redux-router-uncaught-error-expected-the-reducer-to-be-a-function) 102 | 103 | 51. React-redux connect()'s mapStateToProps being called multiple times on react-router navigation **votes: 6**, *views: 960* [http://stackoverflow.com/questions/33573223/react-redux-connects-mapstatetoprops-being-called-multiple-times-on-react-rou](http://stackoverflow.com/questions/33573223/react-redux-connects-mapstatetoprops-being-called-multiple-times-on-react-rou) 104 | 105 | 52. Pass props in Link react-router **votes: 6**, *views: 4800* [http://stackoverflow.com/questions/30115324/pass-props-in-link-react-router](http://stackoverflow.com/questions/30115324/pass-props-in-link-react-router) 106 | 107 | 53. React router app - Route title **votes: 6**, *views: 1518* [http://stackoverflow.com/questions/26132252/react-router-app-route-title](http://stackoverflow.com/questions/26132252/react-router-app-route-title) 108 | 109 | 54. React router with browserHistory goes to server on every URL change **votes: 5**, *views: 162* [http://stackoverflow.com/questions/35631126/react-router-with-browserhistory-goes-to-server-on-every-url-change](http://stackoverflow.com/questions/35631126/react-router-with-browserhistory-goes-to-server-on-every-url-change) 110 | 111 | 55. React Router - History fires first rather waiting **votes: 5**, *views: 50* [http://stackoverflow.com/questions/35305228/react-router-history-fires-first-rather-waiting](http://stackoverflow.com/questions/35305228/react-router-history-fires-first-rather-waiting) 112 | 113 | 56. React 0.14 - using react-router **votes: 5**, *views: 207* [http://stackoverflow.com/questions/34869771/react-0-14-using-react-router](http://stackoverflow.com/questions/34869771/react-0-14-using-react-router) 114 | 115 | 57. findOne throwing undefined even though the data is there **votes: 5**, *views: 101* [http://stackoverflow.com/questions/34830214/findone-throwing-undefined-even-though-the-data-is-there](http://stackoverflow.com/questions/34830214/findone-throwing-undefined-even-though-the-data-is-there) 116 | 117 | 58. this.props.location.state is null when using replaceState in onEnter **votes: 5**, *views: 144* [http://stackoverflow.com/questions/34789698/this-props-location-state-is-null-when-using-replacestate-in-onenter](http://stackoverflow.com/questions/34789698/this-props-location-state-is-null-when-using-replacestate-in-onenter) 118 | 119 | 59. Required context `router` was not specified. Check the render method of `RoutingContext` **votes: 5**, *views: 740* [http://stackoverflow.com/questions/33616875/required-context-router-was-not-specified-check-the-render-method-of-routing](http://stackoverflow.com/questions/33616875/required-context-router-was-not-specified-check-the-render-method-of-routing) 120 | 121 | 60. react-router peerDependencies error **votes: 5**, *views: 2259* [http://stackoverflow.com/questions/32985495/react-router-peerdependencies-error](http://stackoverflow.com/questions/32985495/react-router-peerdependencies-error) 122 | 123 | 61. Random query string appears in react-router **votes: 5**, *views: 1189* [http://stackoverflow.com/questions/32674602/random-query-string-appears-in-react-router](http://stackoverflow.com/questions/32674602/random-query-string-appears-in-react-router) 124 | 125 | 62. How to emulate window.location with react-router and ES6 classes **votes: 5**, *views: 2376* [http://stackoverflow.com/questions/31539349/how-to-emulate-window-location-with-react-router-and-es6-classes](http://stackoverflow.com/questions/31539349/how-to-emulate-window-location-with-react-router-and-es6-classes) 126 | 127 | 63. React Warning: Failed Context Types: Required context `router` was not specified in `Component` **votes: 5**, *views: 2950* [http://stackoverflow.com/questions/30236953/react-warning-failed-context-types-required-context-router-was-not-specified](http://stackoverflow.com/questions/30236953/react-warning-failed-context-types-required-context-router-was-not-specified) 128 | 129 | 64. Testing React Router with Link **votes: 5**, *views: 1182* [http://stackoverflow.com/questions/29624666/testing-react-router-with-link](http://stackoverflow.com/questions/29624666/testing-react-router-with-link) 130 | 131 | 65. How to get route name in handler using react-route? **votes: 5**, *views: 4398* [http://stackoverflow.com/questions/29299717/how-to-get-route-name-in-handler-using-react-route](http://stackoverflow.com/questions/29299717/how-to-get-route-name-in-handler-using-react-route) 132 | 133 | 66. react.js - React-router dealing with fixed headers and footers **votes: 5**, *views: 3165* [http://stackoverflow.com/questions/28077374/react-js-react-router-dealing-with-fixed-headers-and-footers](http://stackoverflow.com/questions/28077374/react-js-react-router-dealing-with-fixed-headers-and-footers) 134 | 135 | 67. Redirecting user based on state in React **votes: 4**, *views: 51* [http://stackoverflow.com/questions/36273584/redirecting-user-based-on-state-in-react](http://stackoverflow.com/questions/36273584/redirecting-user-based-on-state-in-react) 136 | 137 | 68. ReactJS: Accessing Redux Store from routes set up via React Router **votes: 4**, *views: 106* [http://stackoverflow.com/questions/35849970/reactjs-accessing-redux-store-from-routes-set-up-via-react-router](http://stackoverflow.com/questions/35849970/reactjs-accessing-redux-store-from-routes-set-up-via-react-router) 138 | 139 | 69. How to refer state in link on react-router **votes: 4**, *views: 48* [http://stackoverflow.com/questions/35811266/how-to-refer-state-in-link-on-react-router](http://stackoverflow.com/questions/35811266/how-to-refer-state-in-link-on-react-router) 140 | 141 | 70. Passing additional parameters in React Router **votes: 4**, *views: 118* [http://stackoverflow.com/questions/35431276/passing-additional-parameters-in-react-router](http://stackoverflow.com/questions/35431276/passing-additional-parameters-in-react-router) 142 | 143 | 71. How to use a custom component with react-router route transitions? **votes: 4**, *views: 138* [http://stackoverflow.com/questions/35275344/how-to-use-a-custom-component-with-react-router-route-transitions](http://stackoverflow.com/questions/35275344/how-to-use-a-custom-component-with-react-router-route-transitions) 144 | 145 | 72. Dynamic path segment OR 404 **votes: 4**, *views: 90* [http://stackoverflow.com/questions/34810076/dynamic-path-segment-or-404](http://stackoverflow.com/questions/34810076/dynamic-path-segment-or-404) 146 | 147 | 73. How to combine react-router useRouterHistory with redux-simple-router **votes: 4**, *views: 321* [http://stackoverflow.com/questions/34719853/how-to-combine-react-router-userouterhistory-with-redux-simple-router](http://stackoverflow.com/questions/34719853/how-to-combine-react-router-userouterhistory-with-redux-simple-router) 148 | 149 | 74. Route state name in React+Redux **votes: 4**, *views: 84* [http://stackoverflow.com/questions/34571450/route-state-name-in-reactredux](http://stackoverflow.com/questions/34571450/route-state-name-in-reactredux) 150 | 151 | 75. How do you pass top level component state down to Routes using react-router? **votes: 4**, *views: 137* [http://stackoverflow.com/questions/34547884/how-do-you-pass-top-level-component-state-down-to-routes-using-react-router](http://stackoverflow.com/questions/34547884/how-do-you-pass-top-level-component-state-down-to-routes-using-react-router) 152 | 153 | 76. Invariant Violation when using Link component in a dynamic menu **votes: 4**, *views: 131* [http://stackoverflow.com/questions/34442081/invariant-violation-when-using-link-component-in-a-dynamic-menu](http://stackoverflow.com/questions/34442081/invariant-violation-when-using-link-component-in-a-dynamic-menu) 154 | 155 | 77. Warning: [history] pushState is deprecated; use push instead **votes: 4**, *views: 1516* [http://stackoverflow.com/questions/34128823/warning-history-pushstate-is-deprecated-use-push-instead](http://stackoverflow.com/questions/34128823/warning-history-pushstate-is-deprecated-use-push-instead) 156 | 157 | 78. Warning: Failed propType: Invalid prop `component` supplied to `Route` **votes: 4**, *views: 2272* [http://stackoverflow.com/questions/33950433/warning-failed-proptype-invalid-prop-component-supplied-to-route](http://stackoverflow.com/questions/33950433/warning-failed-proptype-invalid-prop-component-supplied-to-route) 158 | 159 | 79. Endless loop rendering component on ReactJs **votes: 4**, *views: 109* [http://stackoverflow.com/questions/33929744/endless-loop-rendering-component-on-reactjs](http://stackoverflow.com/questions/33929744/endless-loop-rendering-component-on-reactjs) 160 | 161 | 80. React-router not displaying component **votes: 4**, *views: 412* [http://stackoverflow.com/questions/33891194/react-router-not-displaying-component](http://stackoverflow.com/questions/33891194/react-router-not-displaying-component) 162 | 163 | 81. how to link in a page with React Router v1.0.0 **votes: 4**, *views: 81* [http://stackoverflow.com/questions/33788085/how-to-link-in-a-page-with-react-router-v1-0-0](http://stackoverflow.com/questions/33788085/how-to-link-in-a-page-with-react-router-v1-0-0) 164 | 165 | 82. Multilanguage support in react router **votes: 4**, *views: 307* [http://stackoverflow.com/questions/33754569/multilanguage-support-in-react-router](http://stackoverflow.com/questions/33754569/multilanguage-support-in-react-router) 166 | 167 | 83. Cannot read property 'pushState' of undefined **votes: 4**, *views: 919* [http://stackoverflow.com/questions/33674650/cannot-read-property-pushstate-of-undefined](http://stackoverflow.com/questions/33674650/cannot-read-property-pushstate-of-undefined) 168 | 169 | 84. Module not found: Error: Cannot resolve 'file' or 'directory' ./dist/qs.js **votes: 4**, *views: 1436* [http://stackoverflow.com/questions/33500823/module-not-found-error-cannot-resolve-file-or-directory-dist-qs-js](http://stackoverflow.com/questions/33500823/module-not-found-error-cannot-resolve-file-or-directory-dist-qs-js) 170 | 171 | 85. How to connect to redux store from react-router onEnter hook? **votes: 4**, *views: 872* [http://stackoverflow.com/questions/33488090/how-to-connect-to-redux-store-from-react-router-onenter-hook](http://stackoverflow.com/questions/33488090/how-to-connect-to-redux-store-from-react-router-onenter-hook) 172 | 173 | 86. Routing issue: this.context.router not defined when trying to re-route **votes: 4**, *views: 714* [http://stackoverflow.com/questions/33214971/routing-issue-this-context-router-not-defined-when-trying-to-re-route](http://stackoverflow.com/questions/33214971/routing-issue-this-context-router-not-defined-when-trying-to-re-route) 174 | 175 | 87. react router 1@rc1 server side redirect **votes: 4**, *views: 221* [http://stackoverflow.com/questions/32988299/react-router-1rc1-server-side-redirect](http://stackoverflow.com/questions/32988299/react-router-1rc1-server-side-redirect) 176 | 177 | 88. How does react-router pass params to other components via props? **votes: 4**, *views: 3455* [http://stackoverflow.com/questions/32901538/how-does-react-router-pass-params-to-other-components-via-props](http://stackoverflow.com/questions/32901538/how-does-react-router-pass-params-to-other-components-via-props) 178 | 179 | 89. How to fetch the new data in response to React Router change with Redux? **votes: 4**, *views: 1345* [http://stackoverflow.com/questions/32846337/how-to-fetch-the-new-data-in-response-to-react-router-change-with-redux](http://stackoverflow.com/questions/32846337/how-to-fetch-the-new-data-in-response-to-react-router-change-with-redux) 180 | 181 | 90. Server side react-router won't render my routes **votes: 4**, *views: 434* [http://stackoverflow.com/questions/32789537/server-side-react-router-wont-render-my-routes](http://stackoverflow.com/questions/32789537/server-side-react-router-wont-render-my-routes) 182 | 183 | 91. React-Router Router.HistoryLocation refreshes the page **votes: 4**, *views: 734* [http://stackoverflow.com/questions/32353899/react-router-router-historylocation-refreshes-the-page](http://stackoverflow.com/questions/32353899/react-router-router-historylocation-refreshes-the-page) 184 | 185 | 92. React router - Nested routes not working **votes: 4**, *views: 2075* [http://stackoverflow.com/questions/32303221/react-router-nested-routes-not-working](http://stackoverflow.com/questions/32303221/react-router-nested-routes-not-working) 186 | 187 | 93. ReactJs - is it possible to set the url or querystring based on state of component tree **votes: 4**, *views: 668* [http://stackoverflow.com/questions/31880856/reactjs-is-it-possible-to-set-the-url-or-querystring-based-on-state-of-compone](http://stackoverflow.com/questions/31880856/reactjs-is-it-possible-to-set-the-url-or-querystring-based-on-state-of-compone) 188 | 189 | 94. react-router go back a page how do you configure history? **votes: 4**, *views: 6966* [http://stackoverflow.com/questions/30915173/react-router-go-back-a-page-how-do-you-configure-history](http://stackoverflow.com/questions/30915173/react-router-go-back-a-page-how-do-you-configure-history) 190 | 191 | 95. react router - get current route **votes: 4**, *views: 5228* [http://stackoverflow.com/questions/30889650/react-router-get-current-route](http://stackoverflow.com/questions/30889650/react-router-get-current-route) 192 | 193 | 96. React, Flux, React-Router Dispatch Error - Possible batchUpdates solution? **votes: 4**, *views: 1685* [http://stackoverflow.com/questions/28759728/react-flux-react-router-dispatch-error-possible-batchupdates-solution](http://stackoverflow.com/questions/28759728/react-flux-react-router-dispatch-error-possible-batchupdates-solution) 194 | 195 | 97. React-router: Uncaught ReferenceError: Router is not defined **votes: 4**, *views: 2282* [http://stackoverflow.com/questions/28015547/react-router-uncaught-referenceerror-router-is-not-defined](http://stackoverflow.com/questions/28015547/react-router-uncaught-referenceerror-router-is-not-defined) 196 | 197 | 98. Reagent generate a React Component that passes React.isValidClass(component)? **votes: 4**, *views: 218* [http://stackoverflow.com/questions/26770117/reagent-generate-a-react-component-that-passes-react-isvalidclasscomponent](http://stackoverflow.com/questions/26770117/reagent-generate-a-react-component-that-passes-react-isvalidclasscomponent) 198 | 199 | 99. browserify loading ReactJS twice with react-router **votes: 4**, *views: 1323* [http://stackoverflow.com/questions/26572753/browserify-loading-reactjs-twice-with-react-router](http://stackoverflow.com/questions/26572753/browserify-loading-reactjs-twice-with-react-router) 200 | 201 | 100. Can I have the same route handler for two routes **votes: 4**, *views: 1167* [http://stackoverflow.com/questions/26357212/can-i-have-the-same-route-handler-for-two-routes](http://stackoverflow.com/questions/26357212/can-i-have-the-same-route-handler-for-two-routes) 202 | -------------------------------------------------------------------------------- /docs/ThingsTheDocsAreMissing.md: -------------------------------------------------------------------------------- 1 | * [ ] - introduction 2 | * [ ] - guides 3 | * [ ] - troubleshooting 4 | * [ ] - better API docs with all arguments documented 5 | * [ ] - examples and illustrations in API 6 | * [x] - client-side "not found" in examples 7 | * [ ] - Document how to send 404s from server when using a fallback route 8 | * [ ] - Add guide for named components (not just in API docs) 9 | * [ ] - introducing re-usable layouts (introduction.md) 10 | -------------------------------------------------------------------------------- /docs/Troubleshooting.md: -------------------------------------------------------------------------------- 1 | # Troubleshooting 2 | 3 | ## TypeError when using React: Cannot read property 'firstChild' of undefined 4 | 5 | This error is commonly caused by [two versions of React loaded alongside](https://github.com/facebook/react/issues/2402). 6 | 7 | For example, if you `npm install` a package that requires a different React version and puts it into `dependencies` instead of `peerDependencies`, it might install a separate React into `node_modules//node_modules/react`. 8 | 9 | Two different Reacts won't play nicely together (at least yet). 10 | 11 | To fix it, just delete `node_modules//node_modules/react`. 12 | If you see a library putting React in `dependencies` instead of `peerDependencies`, file an issue. 13 | 14 | 15 | See more: http://stackoverflow.com/questions/27153166/typeerror-when-using-react-cannot-read-property-firstchild-of-undefined?answertab=votes#tab-top 16 | 17 | --- 18 | -------------------------------------------------------------------------------- /docs/api/Histories.md: -------------------------------------------------------------------------------- 1 | # Histories 2 | 3 | **Todo: add more** 4 | 5 | ## `browserHistory` 6 | `browserHistory` uses the HTML5 History API when available, and falls back to full refreshes otherwise. `browserHistory` requires additional configuration on the server side to serve up URLs, but is the generally preferred solution for modern web pages. 7 | 8 | 9 | ## `hashHistory` 10 | `hashHistory` uses URL hashes, along with a query key to keep track of state. `hashHistory` requires no additional server configuration, but is generally less preferred than `browserHistory`. 11 | 12 | 13 | ## `createMemoryHistory(options)` 14 | `createMemoryHistory` creates an in-memory `history` object that does not interact with the browser URL. This is useful when you need to customize the `history` used for server-side rendering, as well as for automated testing. 15 | 16 | 17 | ## `useRouterHistory(createHistory)` 18 | `useRouterHistory` is a `history` enhancer that configures a given `createHistory` factory to work with React Router. This allows using custom histories in addition to the bundled singleton histories. 19 | 20 | It also pre-enhances the history with the 21 | [useQueries](https://github.com/mjackson/history/blob/master/docs/QuerySupport.md) 22 | and 23 | [useBasename](https://github.com/mjackson/history/blob/master/docs/BasenameSupport.md) 24 | enhancers from `history` 25 | 26 | ## Example 27 | ```jsx 28 | import createHashHistory from 'history/lib/createHashHistory' 29 | const history = useRouterHistory(createHashHistory)({ queryKey: false }) 30 | ``` 31 | -------------------------------------------------------------------------------- /docs/api/IndexLink.md: -------------------------------------------------------------------------------- 1 | # `` 2 | 3 | **Todo: add more here** 4 | 5 | An `` is like a ``, except it is only active when the current route is exactly the linked route. It is equivalent to `` with the `onlyActiveOnIndex` prop set. 6 | 7 | ## Example 8 | 9 | Todo 10 | -------------------------------------------------------------------------------- /docs/api/IndexRedirect.md: -------------------------------------------------------------------------------- 1 | # `` 2 | 3 | **Todo: add more** 4 | 5 | An `` allows you to redirect from the URL of a parent route to another route. They can be used to allow a child route to serve as the default route for its parent, while still keeping a distinct URL. 6 | 7 | ## Props 8 | All the same props as `` except for `from`. 9 | 10 | ## Example 11 | Todo 12 | -------------------------------------------------------------------------------- /docs/api/IndexRoute.md: -------------------------------------------------------------------------------- 1 | # `` 2 | 3 | **Todo: add more** 4 | 5 | An `` allows you to provide a default "child" to a parent route when visitor is at the URL of the parent. 6 | 7 | ## Props 8 | All the same props as `` except for `path`. 9 | 10 | ## Example 11 | Todo 12 | -------------------------------------------------------------------------------- /docs/api/Link.md: -------------------------------------------------------------------------------- 1 | # `` 2 | The primary way to allow users to navigate around your application. `` will render a fully accessible anchor tag with the proper href. 3 | 4 | A `` can know when the route it links to is active and automatically apply an `activeClassName` and/or `activeStyle` when given either prop. The `` will be active if the current route is either the linked route or any descendant of the linked route. To have the link be active only on the exact linked route, use `` instead or set the `onlyActiveOnIndex` prop. 5 | 6 | ## Props 7 | ### `to` 8 | A [location descriptor](https://github.com/mjackson/history/blob/master/docs/Glossary.md#locationdescriptor). Usually this is a string or an object, with the following semantics: 9 | 10 | * If it's a string it represents the absolute path to link to, e.g. `/users/123` (relative paths are not supported). 11 | * If it's an object it can have four keys: 12 | * `pathname`: A string representing the path to link to. 13 | * `query`: An object of key:value pairs to be stringified. 14 | * `hash`: A hash to put in the URL, e.g. `#a-hash`. 15 | * `state`: State to persist to the `location`. 16 | 17 | ### `query` **([Deprecated](https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors) see `to`)** 18 | An object of key:value pairs to be stringified. 19 | 20 | ### `hash` **([Deprecated](https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors) see `to`)** 21 | A hash to put in the URL, e.g. `#a-hash`. 22 | 23 | _Note: React Router currently does not manage scroll position, and will not scroll to the element corresponding to the hash. Scroll position management utilities are available in the [scroll-behavior](https://github.com/taion/scroll-behavior) library._ 24 | 25 | ### `state` **([Deprecated](https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors) see `to`)** 26 | State to persist to the `location`. 27 | 28 | ### `activeClassName` 29 | The className a `` receives when its route is active. No active class by default. 30 | 31 | ### `activeStyle` 32 | The styles to apply to the link element when its route is active. 33 | 34 | ### `onClick(e)` 35 | A custom handler for the click event. Works just like a handler on an `` tag - calling `e.preventDefault()` will prevent the transition from firing, while `e.stopPropagation()` will prevent the event from bubbling. 36 | 37 | ### `onlyActiveOnIndex` 38 | If `true`, the `` will only be active when the current route exactly matches the linked route. 39 | 40 | ### *others* 41 | You can also pass props you'd like to be on the `` such as a `title`, `id`, `className`, etc. 42 | More: https://developer.mozilla.org/en/docs/Web/HTML/Element/a 43 | 44 | ## Example 45 | Given a route like ``: 46 | 47 | ```jsx 48 | {user.name} 49 | // becomes one of these depending on your History and if the route is 50 | // active 51 | Michael 52 | Michael 53 | 54 | // change the activeClassName 55 | {user.name} 56 | 57 | // change style when link is active 58 | Users 59 | ``` 60 | -------------------------------------------------------------------------------- /docs/api/Mixins.md: -------------------------------------------------------------------------------- 1 | # Mixins (deprecated) 2 | 3 | Deprecated, please see the [upgrade guide](https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#mixins-are-deprecated). 4 | -------------------------------------------------------------------------------- /docs/api/PlainRoute.md: -------------------------------------------------------------------------------- 1 | # Plain Route 2 | 3 | A plain JavaScript object route definition. `` turns JSX ``s into these objects, but you can use them directly if you prefer. All of the props are the same as `` props, except those listed here. 4 | 5 | ## Props 6 | ### `childRoutes` 7 | An array of child routes, same as `children` in JSX route configs. 8 | 9 | ### `getChildRoutes(location, callback)` 10 | Same as `childRoutes` but asynchronous and receives the `location`. Useful for code-splitting and dynamic route matching (given some state or session data to return a different set of child routes). 11 | 12 | #### `callback` signature 13 | `cb(err, routesArray)` 14 | 15 | ```jsx 16 | let myRoute = { 17 | path: 'course/:courseId', 18 | childRoutes: [ 19 | announcementsRoute, 20 | gradesRoute, 21 | assignmentsRoute 22 | ] 23 | } 24 | 25 | // async child routes 26 | let myRoute = { 27 | path: 'course/:courseId', 28 | getChildRoutes(location, cb) { 29 | // do asynchronous stuff to find the child routes 30 | cb(null, [ announcementsRoute, gradesRoute, assignmentsRoute ]) 31 | } 32 | } 33 | 34 | // navigation dependent child routes 35 | // can link with some state 36 | 37 | 38 | let myRoute = { 39 | path: 'picture/:id', 40 | getChildRoutes(location, cb) { 41 | let { state } = location 42 | 43 | if (state && state.fromDashboard) { 44 | cb(null, [dashboardPictureRoute]) 45 | } else { 46 | cb(null, [pictureRoute]) 47 | } 48 | } 49 | } 50 | ``` 51 | 52 | ### `indexRoute` 53 | This is the same as specifying an `` child when using JSX route configs. 54 | 55 | ### `getIndexRoute(location, callback)` 56 | 57 | Same as `indexRoute`, but asynchronous and receives the `location`. As with `getChildRoutes`, this can be useful for code-splitting and dynamic route matching. 58 | 59 | #### `callback` signature 60 | `cb(err, route)` 61 | 62 | ```jsx 63 | // For example: 64 | let myIndexRoute = { 65 | component: MyIndex 66 | } 67 | 68 | let myRoute = { 69 | path: 'courses', 70 | indexRoute: myIndexRoute 71 | } 72 | 73 | // async index route 74 | let myRoute = { 75 | path: 'courses', 76 | getIndexRoute(location, cb) { 77 | // do something async here 78 | cb(null, myIndexRoute) 79 | } 80 | } 81 | ``` 82 | -------------------------------------------------------------------------------- /docs/api/PropTypes.md: -------------------------------------------------------------------------------- 1 | # `PropTypes` 2 | 3 | The following objects are exposed as properties of the exported `PropTypes` object: 4 | - `falsy`: Checks that a component does not have a prop 5 | - `history` 6 | - `location` 7 | - `component` 8 | - `components` 9 | - `route` 10 | - `routes` 11 | -------------------------------------------------------------------------------- /docs/api/README.md: -------------------------------------------------------------------------------- 1 | # API Reference 2 | 3 | * ### Components 4 | * [``](/api/Router.md) 5 | * [``](/api/Link.md) 6 | * [``](/api/IndexLink.md) 7 | * [``](/api/RouterContext.md) 8 | * [context.router]() 9 | * [`` (deprecated)](/api/RoutingContext.md) 10 | * [``](/api/Route.md) 11 | * [Plain Route](/api/PlainRoute.md) 12 | * [``](/api/Redirect.md) 13 | * [``](/api/IndexRoute.md) 14 | * [``](/api/IndexRedirect.md) 15 | * ### [Route Components](/api/RouteComponents.md) 16 | * ### [Histories](/api/Histories.md) 17 | * ### Utilities 18 | * [`match()`](/api/match.md) 19 | * [`createRoutes()`](/api/createRoutes.md) 20 | * [`PropTypes`](/api/PropTypes.md) 21 | * [`useRoutes` (deprecated)](/api/useRoutes.md) 22 | * ### [Mixins (deprecated)](/api/Mixins.md) 23 | -------------------------------------------------------------------------------- /docs/api/Redirect.md: -------------------------------------------------------------------------------- 1 | # `` 2 | A `` sets up a redirect to another route in your application to maintain old URLs. 3 | 4 | ## Props 5 | ### `from` 6 | The path you want to redirect from, including dynamic segments. 7 | 8 | ### `to` 9 | The path you want to redirect to. 10 | 11 | ### `query` 12 | By default, the query parameters will just pass through but you can specify them if you need to. 13 | 14 | ```jsx 15 | // Say we want to change from `/profile/123` to `/about/123` 16 | // and redirect `/get-in-touch` to `/contact` 17 | 18 | 19 | {/* /profile/123 -> /about/123 */} 20 | 21 | 22 | ``` 23 | 24 | Note that the `` can be placed anywhere in the route hierarchy, though normal precedence rules apply. If you'd prefer the redirects to be next to their respective routes, the `from` path will match the same as a regular route `path`. 25 | 26 | ```jsx 27 | 28 | 29 | {/* /course/123/home -> /course/123/dashboard */} 30 | 31 | 32 | ``` 33 | -------------------------------------------------------------------------------- /docs/api/Route.md: -------------------------------------------------------------------------------- 1 | # `` 2 | A `` is used to declaratively map routes to your application's component hierarchy. 3 | 4 | ## Props 5 | ### `path` 6 | The path used in the URL. 7 | 8 | It will concat with the parent route's path unless it starts with `/`, 9 | making it an absolute path. 10 | 11 | **Note**: Absolute paths may not be used in route config that is dynamically loaded. 12 | 13 | If left undefined, the router will try to match the child routes. 14 | 15 | ### `component` 16 | A single component to be rendered when the route matches the URL. It can 17 | be rendered by the parent route component with `this.props.children`. 18 | 19 | ```jsx 20 | const routes = ( 21 | 22 | 23 | 24 | 25 | ) 26 | 27 | class App extends React.Component { 28 | render () { 29 | return ( 30 |
31 | {/* this will be either or */} 32 | {this.props.children} 33 |
34 | ) 35 | } 36 | } 37 | ``` 38 | 39 | ### `components` 40 | Routes can define one or more named components as an object of `[name]: component` pairs to be rendered when the path matches the URL. They can be rendered by the parent route component with `this.props[name]`. 41 | 42 | ```jsx 43 | // Think of it outside the context of the router - if you had pluggable 44 | // portions of your `render`, you might do it like this: 45 | // } sidebar={} /> 46 | 47 | const routes = ( 48 | 49 | 50 | 51 | 52 | 53 | 54 | ) 55 | 56 | class App extends React.Component { 57 | render () { 58 | const { main, sidebar } = this.props 59 | return ( 60 |
61 |
62 | {main} 63 |
64 |
65 | {sidebar} 66 |
67 |
68 | ) 69 | } 70 | } 71 | 72 | class Users extends React.Component { 73 | render () { 74 | return ( 75 |
76 | {/* if at "/users/123" `children` will be */} 77 | {/* UsersSidebar will also get as this.props.children, 78 | so its a little weird, but you can decide which one wants 79 | to continue with the nesting */} 80 | {this.props.children} 81 |
82 | ) 83 | } 84 | } 85 | ``` 86 | 87 | ### `getComponent(location, callback)` 88 | Same as `component` but asynchronous, useful for 89 | code-splitting. 90 | 91 | #### `callback` signature 92 | `cb(err, component)` 93 | 94 | ```jsx 95 | { 96 | // do asynchronous stuff to find the components 97 | cb(null, Course) 98 | }} /> 99 | ``` 100 | 101 | ### `getComponents(location, callback)` 102 | Same as `components` but asynchronous, useful for 103 | code-splitting. 104 | 105 | #### `callback` signature 106 | `cb(err, components)` 107 | 108 | ```jsx 109 | { 110 | // do asynchronous stuff to find the components 111 | cb(null, {sidebar: CourseSidebar, content: Course}) 112 | }} /> 113 | ``` 114 | 115 | ### `children` 116 | Routes can be nested, `this.props.children` will contain the element created from the child route component. Please refer to the `Route Configuration` since this is a very critical part of the router's design. 117 | 118 | ### `onEnter(nextState, replace, callback?)` 119 | Called when a route is about to be entered. It provides the next router state and a function to redirect to another path. `this` will be the route instance that triggered the hook. 120 | 121 | If `callback` is listed as a 3rd argument, this hook will run asynchronously, and the transition will block until `callback` is called. 122 | 123 | ### `onChange(prevState, nextState, replace, callback?)` 124 | Called on routes when the location changes, but the route itself neither enters or leaves. For example, this will be called when a route's children change, or when the location query changes. It provides the previous router state, the next router state, and a function to redirect to another path. `this` will be the route instance that triggered the hook. 125 | 126 | If `callback` is listed as a 4th argument, this hook will run asynchronously, and the transition will block until `callback` is called. 127 | 128 | ### `onLeave()` 129 | Called when a route is about to be exited. 130 | -------------------------------------------------------------------------------- /docs/api/RouteComponents.md: -------------------------------------------------------------------------------- 1 | # Route Components 2 | A route's component is rendered when that route matches the URL. The router will inject the following properties into your component when it's rendered: 3 | 4 | ## Injected Props 5 | 6 | ### `history` (deprecated) 7 | 8 | ### `location` 9 | The current [location](https://github.com/reactjs/history/blob/master/docs/Location.md). 10 | 11 | ### `params` 12 | The dynamic segments of the URL. 13 | 14 | ### `route` 15 | The route that rendered this component. 16 | 17 | ### `routeParams` 18 | A subset of `this.props.params` that were directly specified in this component's route. For example, if the route's path is `users/:userId` and the URL is `/users/123/portfolios/345` then `this.props.routeParams` will be `{userId: '123'}`, and `this.props.params` will be `{userId: '123', portfolioId: 345}`. 19 | 20 | ### `children` 21 | The matched child route element to be rendered. If the route has named components then this will be undefined, and the components will instead be available as direct properties on `this.props`. 22 | 23 | #### Example 24 | ```jsx 25 | render(( 26 | 27 | 28 | 29 | 30 | 31 | 32 | ), node) 33 | 34 | class App extends React.Component { 35 | render() { 36 | return ( 37 |
38 | {/* this will be either or */} 39 | {this.props.children} 40 |
41 | ) 42 | } 43 | } 44 | ``` 45 | 46 | ## Named Components 47 | When a route has one or more named components, the child elements are available by name on `this.props`. In this case `this.props.children` will be undefined. All route components can participate in the nesting. 48 | 49 | ### Example 50 | ```jsx 51 | render(( 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | ), node) 61 | 62 | class App extends React.Component { 63 | render() { 64 | // the matched child route components become props in the parent 65 | return ( 66 |
67 |
68 | {/* this will either be or */} 69 | {this.props.main} 70 |
71 |
72 | {/* this will either be or */} 73 | {this.props.sidebar} 74 |
75 |
76 | ) 77 | } 78 | } 79 | 80 | class Users extends React.Component { 81 | render() { 82 | return ( 83 |
84 | {/* if at "/users/123" this will be */} 85 | {/* UsersSidebar will also get as this.props.children. 86 | You can pick where it renders */} 87 | {this.props.children} 88 |
89 | ) 90 | } 91 | } 92 | ``` 93 | -------------------------------------------------------------------------------- /docs/api/Router.md: -------------------------------------------------------------------------------- 1 | # `` 2 | 3 | Primary component of React Router. It keeps your UI and the URL in sync. 4 | 5 | ## Props 6 | ### `children` (required) 7 | One or many `` or `PlainRoute`. When the history changes, `` will match a branch of its routes, and render their configured components, with child route components nested inside the parents. 8 | 9 | ### `routes` 10 | Alias for `children`. 11 | 12 | ### `history` 13 | The history the router should listen to. Typically `browserHistory` or `hashHistory`. 14 | 15 | ```jsx 16 | import { browserHistory } from 'react-router' 17 | ReactDOM.render(, el) 18 | ``` 19 | 20 | ### `createElement(Component, props)` 21 | When the router is ready to render a branch of route components, it will use this function to create the elements. You may want to take control of creating the elements when you're using some sort of data abstraction, like setting up subscriptions to stores, or passing in some sort of application module to each component via props. 22 | 23 | ```jsx 24 | 25 | 26 | // default behavior 27 | function createElement(Component, props) { 28 | // make sure you pass all the props in! 29 | return 30 | } 31 | 32 | // maybe you're using something like Relay 33 | function createElement(Component, props) { 34 | // make sure you pass all the props in! 35 | return 36 | } 37 | ``` 38 | 39 | ### `stringifyQuery(queryObject)` 40 | A function used to convert an object from `` or calls to 41 | `transitionTo` to a URL query string. 42 | 43 | ### `parseQueryString(queryString)` 44 | A function used to convert a query string into an object that gets passed to route component props. 45 | 46 | ### `onError(error)` 47 | While the router is matching, errors may bubble up, here is your opportunity to catch and deal with them. Typically these will come from async features like `route.getComponents`, `route.getIndexRoute`, and `route.getChildRoutes`. 48 | 49 | ### `onUpdate()` 50 | Called whenever the router updates its state in response to URL changes. 51 | 52 | ### `render(props)` 53 | This is primarily for integrating with other libraries that need to participate in rendering before the route components are rendered. It defaults to: 54 | 55 | ```jsx 56 | render={(props) => } 57 | ``` 58 | 59 | Ensure that you render a `` at the end of the line, passing all the props passed to `render`. 60 | 61 | 62 | ## Examples 63 | Todo 64 | -------------------------------------------------------------------------------- /docs/api/RouterContext.md: -------------------------------------------------------------------------------- 1 | # `` 2 | A `` renders the component tree for a given router state. Its used by `` but also useful for server rendering and integrating in brownfield development. 3 | 4 | It also provides a `router` object on `context`. 5 | 6 | ## `context.router` 7 | 8 | Contains data and methods relevant to routing. Most useful for imperatively transitioning around the application. 9 | 10 | ### `push(pathOrLoc)` 11 | Transitions to a new URL, adding a new entry in the browser history. 12 | 13 | ```jsx 14 | router.push('/users/12') 15 | 16 | // or with a location descriptor object 17 | router.push({ 18 | pathname: '/users/12', 19 | query: { modal: true }, 20 | state: { fromDashboard: true } 21 | }) 22 | ``` 23 | 24 | ### `replace(pathOrLoc)` 25 | Identical to `push` except replaces the current history entry with a new one. 26 | 27 | ### `go(n)` 28 | Go forward or backward in the history by `n` or `-n`. 29 | 30 | ### `goBack()` 31 | Go back one entry in the history. 32 | 33 | ### `goForward()` 34 | Go forward one entry in the history. 35 | 36 | ### `createPath(pathOrLoc, query)` 37 | Stringifies the query into the pathname, using the router's config. 38 | 39 | ### `createHref(pathOrLoc, query)` 40 | Creates a URL, using the router's config. For example, it will add `#/` in front of the `pathname` for hash history. 41 | 42 | ### `isActive(pathOrLoc, indexOnly)` 43 | Returns `true` or `false` depending on if the `pathOrLoc` is active. Will be true for every route in the route branch matched (child route is active, therefore parent is too), unless `indexOnly` is specified, in which case it will only match the exact path. 44 | 45 | A route is only considered active if all the URL parameters match, including optional parameters and their presence or absence. 46 | 47 | However, only explicitly specified query parameters will be checked. That means that: 48 | 49 | ```js 50 | isActive({ pathname: '/foo', query: { a: 'b' } }) 51 | ``` 52 | 53 | will return `true` when the location is `/foo?a=b&c=d`. To require that a query parameter be absent, specify its value as an explicit `undefined`, i.e. 54 | 55 | ```js 56 | isActive({ pathname: '/foo', query: { a: 'b', c: undefined } }) 57 | ``` 58 | 59 | which would be `false` in this example. 60 | -------------------------------------------------------------------------------- /docs/api/RoutingContext.md: -------------------------------------------------------------------------------- 1 | # `` (deprecated) 2 | 3 | `` is deprecated, use **``**. 4 | -------------------------------------------------------------------------------- /docs/api/createRoutes.md: -------------------------------------------------------------------------------- 1 | # `createRoutes(routes)` 2 | 3 | Creates and returns an array of routes from the given object which may be a JSX route, a plain object route, or an array of either. 4 | 5 | ## params 6 | 7 | ### `routes` 8 | One or many `` or `PlainRoute`. 9 | 10 | ## Example 11 | Todo 12 | -------------------------------------------------------------------------------- /docs/api/match.md: -------------------------------------------------------------------------------- 1 | # `match({ routes, location, [history], ...options }, cb)` 2 | 3 | This function is to be used for server-side rendering. It matches a set of routes to a location, without rendering, and calls a `callback(error, redirectLocation, renderProps)` when it's done. 4 | 5 | The function will create a `history` for you, passing the additional `options` along to create it. These options can include `basename` to control the base name for URLs, as well as the pair of `parseQueryString` and `stringifyQuery` to control query string parsing and serializing. You can also pass in an already instantiated `history` object, which can be constructed however you like. 6 | 7 | The three arguments to the callback function you pass to `match` are: 8 | 9 | ### `error` 10 | A Javascript `Error` object if an error occurred, `undefined` otherwise. 11 | 12 | ### `redirectLocation` 13 | A Location object if the route is a redirect, `undefined` otherwise. 14 | 15 | ### `renderProps` 16 | The props you should pass to the routing context if the route matched, `undefined` otherwise. 17 | 18 | --- 19 | 20 | If all three parameters are `undefined`, this means that there was no route found matching the given location. 21 | 22 | **Note**: *You probably don't want to use this in a browser unless you're doing server-side rendering of async routes.* 23 | -------------------------------------------------------------------------------- /docs/api/useRoutes.md: -------------------------------------------------------------------------------- 1 | # `useRoutes(createHistory)` (deprecated) 2 | 3 | **Todo: what to use instead**. Example on how to upgrade 4 | -------------------------------------------------------------------------------- /docs/guides/CodeSplitting.md: -------------------------------------------------------------------------------- 1 | # Code splitting 2 | 3 | Todo: what is it? why to use it? how? 4 | -------------------------------------------------------------------------------- /docs/guides/DataFetching.md: -------------------------------------------------------------------------------- 1 | # Data Fetching 2 | 3 | Todo: async-props, etc. 4 | -------------------------------------------------------------------------------- /docs/guides/ExampleApp.md: -------------------------------------------------------------------------------- 1 | # Example App 2 | 3 | Show how would you build an example app with the Router (small step-by-step tutorial). email app? 4 | -------------------------------------------------------------------------------- /docs/guides/HashtagInUrl.md: -------------------------------------------------------------------------------- 1 | # Hashtag in the URL 2 | 3 | Todo: what is it? Why? how to remove it? What is `?k=fsdgf6`? 4 | -------------------------------------------------------------------------------- /docs/guides/NamedComponents.md: -------------------------------------------------------------------------------- 1 | # Named Components 2 | 3 | Todo 4 | -------------------------------------------------------------------------------- /docs/guides/NavigateOutsideComponents.md: -------------------------------------------------------------------------------- 1 | # Navigate Outside of Components 2 | 3 | You are probably familiar with navigating around your app with use of ``. 4 | This is very easy and useful, but what if you are trying to navigate outside of the React's 5 | `render` method? 6 | 7 | React Router provides a few ways of accomplishing it. 8 | 9 | ## 1. Using `this.props.history` 10 | 11 | If you are trying to do it in the Route component (in short, *it's a component which is definied in your routes configuration*) 12 | then you could take `history` object off of the `props` and then use `history`'s `push` method to 13 | navigate to the path you want. 14 | 15 | ```jsx 16 | // components/Home.js 17 | import React, { Component } from 'react'; 18 | 19 | class Home extends Component { 20 | constructor() { 21 | super(); 22 | this.handleClick = this.handleClick.bind(this); 23 | } 24 | 25 | handleClick(e) { 26 | e.preventDefault(); 27 | this.props.history.push('/about'); 28 | } 29 | 30 | render() { 31 | return ( 32 |
33 |

Home

34 | 37 |
38 | ); 39 | } 40 | } 41 | ``` 42 | 43 | ```jsx 44 | import React from 'react'; 45 | import { render } from 'react-dom'; 46 | import { Router, Route, browserHistory } from 'react-router'; 47 | import App from './components/App'; 48 | import Home from './components/Home'; 49 | 50 | const Root = () => 51 | 52 | 53 | 54 | {/* other routes */} 55 | 56 | 57 | 58 | render(, document.getElementById('root')); 59 | ``` 60 | 61 | [source code](https://jsfiddle.net/knowbody/pmkqLvmc/2/) 62 | 63 | 64 | 65 | ## 2. Using history that app gives to the `` 66 | 67 | ```jsx 68 | // your main file that renders a Router 69 | import { Router, browserHistory } from 'react-router'; 70 | import routes from './app/routes'; 71 | 72 | render(, el); 73 | ``` 74 | 75 | ```jsx 76 | // somewhere like a redux/flux action file: 77 | import { browserHistory } from 'react-router' 78 | browserHistory.push('/some/path') 79 | ``` 80 | 81 | 82 | ## 3. Using `this.context.router` 83 | 84 | If your route is not a Route component you can't grab `history` object from `props`. 85 | Instead, let's take a `router` object off of the [`context`](https://facebook.github.io/react/docs/context.html). 86 | 87 | *`router` object has a `push` method which is needed for navigation.* 88 | 89 | The only way to get access to `context` is by defining it in the `contextTypes`, or else `this.context` 90 | will be an empty object. 91 | 92 | ```jsx 93 | import React, { Component, PropTypes } from 'react'; 94 | 95 | class MyComponent extends Component { 96 | // ... 97 | } 98 | 99 | MyComponent.contextTypes = { 100 | router: PropTypes.object.isRequired 101 | }; 102 | ``` 103 | 104 | Once the `context` is available for our component, we can use `router`'s `push` method to navigate 105 | to the defined path. 106 | 107 | ```jsx 108 | import React, { Component, PropTypes } from 'react'; 109 | 110 | class Home extends Component { 111 | constructor() { 112 | super(); 113 | this.handleClick = this.handleClick.bind(this); 114 | } 115 | 116 | handleClick(e) { 117 | e.preventDefault(); 118 | this.context.router.push('/about'); 119 | } 120 | 121 | render() { 122 | return ( 123 |
124 |

Home

125 | 128 |
129 | ); 130 | } 131 | } 132 | 133 | Home.contextTypes = { 134 | router: PropTypes.object.isRequired 135 | }; 136 | ``` 137 | 138 | [source code](https://jsfiddle.net/knowbody/ok3jbsym/) 139 | -------------------------------------------------------------------------------- /docs/guides/NotFound.md: -------------------------------------------------------------------------------- 1 | # Client side "404 not found" 2 | 3 | To create a client side "404 not found" fallback all you need to do is make use of a `` component 4 | with a non-greedy matching path. 5 | 6 | Create your `NotFound` component, i.e. the page which will display 404 error message: 7 | 8 | ```jsx 9 | // components/NotFound.js 10 | import React from 'react'; 11 | 12 | const NotFound = () => 13 |
14 |

404 page not found

15 |

We are sorry but the page you are looking for does not exist.

16 |
17 | 18 | export default NotFound; 19 | ``` 20 | 21 | Let's add `` component to routes configuration, using `*` as a value of the `path` parameter 22 | to get a non-greedy matching. 23 | 24 | It is important to remember that the 404 route **needs to be declared 25 | in the very bottom of your routes configuration**, so the `` is only mounted if any of the 26 | routes' path declared above are not matched: 27 | 28 | ```jsx 29 | import React from 'react'; 30 | import { render } from 'react-dom'; 31 | import { Router, Route, browserHistory } from 'react-router'; 32 | import App from './components/App'; 33 | import NotFound from './components/NotFound'; 34 | 35 | const Root = () => 36 | 37 | 38 | 39 | {/* Your other routes here */} 40 | 41 | 42 | 43 | 44 | 45 | render(, document.getElementById('root')); 46 | ``` 47 | 48 | See the live example below, try to enter some non valid url to see 404 page: 49 | 50 | [source code](https://jsfiddle.net/knowbody/35bve12w/) 51 | -------------------------------------------------------------------------------- /docs/guides/PassingPropsRouteComponent.md: -------------------------------------------------------------------------------- 1 | # Passing `props` to Route component 2 | 3 | Todo: `React.cloneElement`, add to `context`, etc. 4 | -------------------------------------------------------------------------------- /docs/guides/RouteTransitions.md: -------------------------------------------------------------------------------- 1 | # Route transitions 2 | 3 | How to perform routes transition 4 | -------------------------------------------------------------------------------- /docs/guides/ServerRendering.md: -------------------------------------------------------------------------------- 1 | # Server Rendering 2 | 3 | Todo: how to? benefits? etc. 4 | -------------------------------------------------------------------------------- /docs/guides/UsageWithFlux.md: -------------------------------------------------------------------------------- 1 | # Using React Router with Flux 2 | 3 | Todo 4 | -------------------------------------------------------------------------------- /docs/guides/UsageWithRedux.md: -------------------------------------------------------------------------------- 1 | # Using React Router with Redux 2 | 3 | Todo 4 | -------------------------------------------------------------------------------- /docs/guides/UsageWithRelay.md: -------------------------------------------------------------------------------- 1 | # Using React Router with Relay 2 | 3 | Todo 4 | -------------------------------------------------------------------------------- /docs/guides/UsageWithWebpack.md: -------------------------------------------------------------------------------- 1 | # Using React Router with Webpack 2 | 3 | Todo: how to configure, `historyApiFallback`, etc. 4 | -------------------------------------------------------------------------------- /docs/guides/WritingTests.md: -------------------------------------------------------------------------------- 1 | # Writing Tests 2 | 3 | Todo: how to test? what to test? TestUtils/Jest/Enzyme 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-router-docs", 3 | "version": "1.0.0", 4 | "description": "React Router Docs", 5 | "main": "index.js", 6 | "directories": { 7 | "doc": "docs" 8 | }, 9 | "scripts": { 10 | "docs:clean": "rimraf docs/_book && rimraf _book", 11 | "docs:prepare": "gitbook install", 12 | "docs:build": "npm run docs:prepare && gitbook build -g knowbody/react-router-docs", 13 | "docs:watch": "npm run docs:prepare && gitbook serve", 14 | "docs:publish": "npm run docs:clean && npm run docs:build && cd _book && git init && git commit --allow-empty -m 'update book' && git checkout -b gh-pages && touch .nojekyll && git add . && git commit -am 'update book' && git push git@github.com:knowbody/react-router-docs gh-pages --force" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/knowbody/react-router-docs.git" 19 | }, 20 | "keywords": [], 21 | "author": "Mateusz Zatorski (https://github.com/knowbody)", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/knowbody/react-router-docs/issues" 25 | }, 26 | "homepage": "https://github.com/knowbody/react-router-docs#readme", 27 | "devDependencies": { 28 | "gitbook-cli": "^2.1.2", 29 | "rimraf": "^2.5.2" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /playground/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /playground/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "react/prefer-stateless-function": 1, 4 | "no-use-before-define": 1, 5 | }, 6 | "extends": "airbnb" 7 | } 8 | -------------------------------------------------------------------------------- /playground/README.md: -------------------------------------------------------------------------------- 1 | React Router Playground 2 | === 3 | 4 | Feel free to play around with the React Router here or use it as a boilerplate to your PR if you need help. 5 | 6 | ### Get started 7 | 8 | 1. Clone or fork the repository. 9 | 2. Navigate to playground: `cd playground`. 10 | 3. Install dependencies: `npm install`. 11 | 4. Start playground server: `npm start`. 12 | 5. Navigate to: [http://127.0.0.1:3000](http://127.0.0.1:3000) in your browser. 13 | -------------------------------------------------------------------------------- /playground/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React router playground 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-router-docs", 3 | "version": "1.0.0", 4 | "description": "React Router playground", 5 | "main": "server.js", 6 | "scripts": { 7 | "start": "node server.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/knowbody/react-router-docs.git" 12 | }, 13 | "author": "Mateusz Zatorski (https://github.com/knowbody)", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/knowbody/react-router-docs/issues" 17 | }, 18 | "homepage": "https://github.com/knowbody/react-router-docs#readme", 19 | "devDependencies": { 20 | "babel-core": "^6.7.2", 21 | "babel-eslint": "^5.0.0", 22 | "babel-loader": "^6.2.4", 23 | "babel-plugin-react-transform": "^2.0.2", 24 | "babel-preset-es2015": "^6.6.0", 25 | "babel-preset-react": "^6.5.0", 26 | "babel-preset-stage-0": "^6.5.0", 27 | "eslint": "^2.4.0", 28 | "eslint-config-airbnb": "^6.1.0", 29 | "eslint-plugin-react": "^4.2.3", 30 | "express": "^4.13.4", 31 | "react-transform-catch-errors": "^1.0.2", 32 | "react-transform-hmr": "^1.0.4", 33 | "redbox-react": "^1.2.2", 34 | "webpack": "^1.12.14", 35 | "webpack-dev-middleware": "^1.5.1", 36 | "webpack-hot-middleware": "^2.10.0" 37 | }, 38 | "dependencies": { 39 | "history": "^3.0.0-0", 40 | "react": "^15.0.0-rc.2", 41 | "react-dom": "^15.0.0-rc.2", 42 | "react-router": "^2.0.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /playground/server.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | var path = require('path'); 4 | var express = require('express'); 5 | var webpack = require('webpack'); 6 | var config = require('./webpack.config'); 7 | 8 | var app = express(); 9 | var compiler = webpack(config); 10 | 11 | app.use(require('webpack-dev-middleware')(compiler, { 12 | noInfo: true, 13 | publicPath: config.output.publicPath 14 | })); 15 | 16 | app.use(require('webpack-hot-middleware')(compiler)); 17 | 18 | app.get('*', function(req, res) { 19 | res.sendFile(path.join(__dirname, 'index.html')); 20 | }); 21 | 22 | app.listen(3000, 'localhost', function (err) { 23 | if (err) { 24 | console.log(err); 25 | return; 26 | } 27 | 28 | console.log('Listening at http://localhost:3000'); 29 | }); 30 | -------------------------------------------------------------------------------- /playground/src/app.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | import { Router, Route, Link, IndexRoute, Redirect, browserHistory } from 'react-router'; 3 | 4 | 5 | const Home = () =>

Home

; 6 | 7 | const About = () =>

About

; 8 | 9 | const Contact = () =>

Contact

; 10 | 11 | const Messages = () =>

Messages

; 12 | 13 | const SentMessages = () =>

Your sent messages

; 14 | 15 | const Inbox = ({ children }) => ( 16 |
17 |

Inbox

18 |
    19 |
  • Inbox
    • 20 |
  • Sent
    • 21 |
  • My messages
    • 22 |
23 |
24 | {children} 25 |
26 |
27 | ); 28 | 29 | Inbox.propTypes = { 30 | children: PropTypes.object.isRequired, 31 | }; 32 | 33 | const Navigation = (props, { router }) => { 34 | let inboxSubmenu = null; 35 | if (router.isActive('/inbox')) { 36 | inboxSubmenu = ( 37 |
    38 |
  • Sent
    • 39 |
  • My messages
    • 40 |
41 | ); 42 | } 43 | 44 | return ( 45 |
46 |

Navigation

47 |
    48 |
  • Home
    • 49 |
  • About
    • 50 |
  • Contact
    • 51 |
  • Inbox
    • 52 | { inboxSubmenu } 53 |
54 |
55 | ); 56 | }; 57 | 58 | Navigation.contextTypes = { 59 | router: PropTypes.object.isRequired, 60 | }; 61 | 62 | const App = ({ children }) => ( 63 |
64 |

App

65 | 66 | 67 | 68 |
69 | {children} 70 |
71 |
72 | ); 73 | 74 | App.propTypes = { 75 | children: PropTypes.object.isRequired, 76 | }; 77 | 78 | const Root = () => ( 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | ); 92 | 93 | export default Root; 94 | -------------------------------------------------------------------------------- /playground/src/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import Root from './app'; 4 | 5 | render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /playground/webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | var path = require('path'); 4 | var webpack = require('webpack'); 5 | 6 | module.exports = { 7 | devtool: 'sourcemap', 8 | entry: [ 9 | 'webpack-hot-middleware/client', 10 | './src/main' 11 | ], 12 | output: { 13 | path: path.join(__dirname, 'dist'), 14 | filename: 'bundle.js', 15 | publicPath: '/static/' 16 | }, 17 | plugins: [ 18 | new webpack.HotModuleReplacementPlugin(), 19 | new webpack.NoErrorsPlugin() 20 | ], 21 | module: { 22 | loaders: [ 23 | { 24 | test: /\.js$/, 25 | loader: 'babel', 26 | query: { 27 | plugins: [ 28 | [ 29 | 'react-transform', { 30 | transforms: [{ 31 | transform: 'react-transform-hmr', 32 | imports: ['react'], 33 | locals: ['module'] 34 | }, { 35 | transform: 'react-transform-catch-errors', 36 | imports: ['react', 'redbox-react'] 37 | }] 38 | } 39 | ] 40 | ] 41 | }, 42 | include: path.join(__dirname, 'src') 43 | } 44 | ] 45 | } 46 | }; 47 | --------------------------------------------------------------------------------