s rendered outside of a router context cannot navigate

Source: Internet
Author: User

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 ...
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.