s rendered outside of a router context cannot navigate

Today this problem for a long time, finally find out why, we search this problem in Baidu basically only one answer click Open link

In fact, it is not to say that people answer the wrong, but more vague, see screenshots:

In fact, the answer is this, when we use React-router, React-router's idea is to let us <Link/> write a separate component navigation.js, and then import in, through This.props.children are passed to each route. And then what? adding components to the root route establishes the affinity. That

<router history={browserhistory}>
<route path= "/" component={navigation}>
<link to= "/one" > Home </Link>
<route path= "/one" component={onecomponent}/>
<route path= "/two" component={twocomponent}/>
<route path= "/three" component={threecomponent}/>
</Route>
</Router>

Remember: Be sure to establish an association in this root route, or you will always report the Magic Error < Route path = "/" Component={navigation} ></Route>

Naturally, we can think of something that Navigation.js is.

Import react, {Component} from ' React ';
Import {Link} from ' React-router ';

Export default class Appcontainer extends Component {
    render () {return
        (
            <div>
                <div>
                   <link to= "/one" >One</Link>
                   <link to= "/two" >Two</Link>
                   <link to= "/three" > three</link>
                </div>

                <div>
                     {this.props.children}
                </div>
            </ Div>
        )
    }
}

I have been trying to write this document and router, but it looks like the 3.0 version is not, but 4.0 after the revision is really can be so ...