How is react-router being created when using contextTypes?

Question

I've got react-router 4.0.0-alpha.4 installed in my React project, which is a tutorial that I'm following, and I'm having a really difficult time understanding how it's being called in StorePicker.jsx

App.jsx

import React from 'react'; 
import { render } from 'react-dom'; 
import './css/style.css'; 

import {BrowserRouter, Match, Miss} from 'react-router';

import StorePicker from './components/StorePicker';
import App from './components/App';
import NotFound from './components/NotFound';

const Root = () => {
    return(
        <BrowserRouter>
            <div>
                <Match exactly pattern="/" component={StorePicker}/>
                <Match pattern="/store/:storeId" component={App}/>
                <Miss component={NotFound}/>
            </div>
        </BrowserRouter>
    )
}

render(<Root/>, document.querySelector('#main'));

So towards the end in StorePicker.jsx I create a contextTypes property on the StorePicker object. I then set the value equal to { router: React.PropTypes.object }. React.PropTypes.object has nothing to do with the router though.

But in goToStore(event) all of a sudden the router object is available in this.context.router.

Where did this come from? Is it because the word router is a special keyword when I use it in contextTypes, and React.PropTypes.object somehow knows to fetch the router object as a result and add it to this.context?
Why is this tutorial even telling me to use this pattern? According to the React docs, context should be avoided: https://facebook.github.io/react/docs/context.html
Is there a better way to do this?

StorePicker.jsx

import React from 'react';
import { getFunName } from '../helpers.js'

class StorePicker extends React.Component{

    goToStore(event){
        event.preventDefault();
        const storeId = "1234";
        this.context.router.transitionTo(`/store/${storeId}`);
    }

    render(){
        return (
            <button onClick={(e) => this.goToStore(e)}>CLICK ME</button>
        )
    }
};

StorePicker.contextTypes = {
    router: React.PropTypes.object
}

export default StorePicker;

The code from this tutorial works, but I have no idea why it's working.

You'll notice that I already linked to the docs in my question. So it should probably be obvious that telling me the answers are in something that I've already linked to isn't going to get me anywhere. I'm having a hard time understanding the docs. Forgive me for being dumb. — fuzzybabybunny, Aug 27 '17 at 06:26
I was able to find a much, MUCH better resource than the official docs that explains `context` and `contextTypes` in greater detail and clarity: https://javascriptplayground.com/blog/2017/02/context-in-reactjs-applications/ — fuzzybabybunny, Aug 27 '17 at 06:35

Abhishek Sinha · Answer 1 · 2017-08-27T17:54:05.650

3.Is there a better way to do this? :

You should not use context. It seems you only require to redirect to an url (whose value depends on the text box) when the form submits.

In React, you can use react routers.

Here's some more examples: StackOverflow: programmatically-navigate-using-react-router

Or in Javascript, if you just have to redirect to an url location you can simply use 'window.location' function as follows:

goToStore(event) {
    event.preventDefault();
    const storeId = this.storeInput.value;
    window.location.assign(`/store/${storeId}`)
  }

However, you may not want to use second option as Javascript renders whole dom and then there's no advantage of using React then.

How is react-router being created when using contextTypes?

1 Answers1