https://github.com/driftt/react-redirect

a declarative and universal way to specify window.location in a single-page React apps
https://github.com/driftt/react-redirect

Last synced: 29 days ago
JSON representation

a declarative and universal way to specify window.location in a single-page React apps

• Host: GitHub
• URL: https://github.com/driftt/react-redirect
• Owner: Driftt
• License: mit
• Created: 2015-07-10T18:24:04.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-05-09T18:27:59.000Z (over 7 years ago)
• Last Synced: 2024-12-17T11:29:32.704Z (30 days ago)
• Language: JavaScript
• Homepage:
• Size: 5.86 KB
• Stars: 26
• Watchers: 47
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
> ## This Project Is Deprecated

> react-redirect is no longer used internally at Drift or maintained by us. We recommend using [react-side-effect](https://github.com/gaearon/react-side-effect) or `window.location` directly.

----

React Redirect

====================

Provides a declarative way to specify `window.location` in a single-page app.

This component can be used on server side as well.

Built with [React Side Effect](https://github.com/gaearon/react-side-effect).

## Installation

```

npm install --save react-redirect

```

Dependencies: React >= 0.11.0

## Features

* Like a normal React compoment, can use its parent's `props` and `state`;

* Can be defined in many places throughout the application;

* Supports arbitrary levels of nesting, so you can define app-wide and page-specific titles;

* Works just as well with isomorphic apps.

## Example

Assuming you use something like [react-router](https://github.com/rackt/react-router):

```javascript

var App = React.createClass({

  render: function () {

    // Redirect to "www.driftt.com" if no child overrides this

    return (

      

        

      

    );

  }

});

var HomePageRedirect = React.createClass({

  render: function () {

    // redirect to "www.driftt.com" while this component is mounted

    return (

      

      

    );

  }

});

var NewArticlePage = React.createClass({

  mixins: [LinkStateMixin],

  render: function () {

    // Redirect using value from state when this component is mounted

    return (

      

        


          Redirecting...

        

      

    );

  }

});

```


## Server Usage

If you use it on server, call `ReactRedirect.rewind()` **after rendering components to string** to retrieve the redirect location given to the innermost `ReactRedirect`. You can then embed this title into HTML page template.

Because this component keeps track of mounted instances, **you have to make sure to call `rewind` on server**, or you'll get a memory leak.

### Example assuming you use [express](https://github.com/strongloop/express) for your server

```javascript

var middleWare = function(req, res) {

  var html = React.renderToString(React.createElement(component));

  var redirect = ReactRedirect.rewind();

  if (redirect) {

    res.redirect(302, redirect);

  } else {

    res.end(html);

  }

}

```