The `router` context is marked as required in` Link`, but its value is `undefined`

Question

I have a problem with Link. Googled has a lot of topics, but I did not get the right answer. In one of the discussions, the problem lies in the earlier version of the router, and in the other, in the incorrect import of components, the third answer was not even announced.

Also, what about the "story"?

Component Versions:

"react": "^15.4", "react-dom": "^15.4", "react-router": "^4.1.1", "react-router-dom": "^4.1.1" 

Errors:

 Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`. 

and

 Uncaught TypeError: Cannot read property 'history' of undefined 

The component that uses the link is pretty primitive:

 import React from 'react'; import { Link } from 'react-router-dom'; export default class Menu extends React.Component { constructor(props) { super(props); } render() { return ( <div> <ul> <li><Link to="/one">1</Link></li> <li><Link to="/two">2</Link></li> <li><Link to="/three">3</Link></li> <li><Link to="/four">4</Link></li> </ul> </div> ); } } 

So, the component with the router looks like this:

 import React from 'react'; import { BrowserRouter, Route } from 'react-router-dom' import Page1 from './Page1'; import Page2 from './Page2'; import Page3 from './Page3'; import Page4 from './Page4'; export default class Routes extends React.Component { constructor(props) { super(props); } render() { return ( <BrowserRouter text = {this.props.text}> <Route path = "/one" render={(props) => ( <Page1 text = {this.props.text.Page1} {...props} />)} /> <Route path = "/two" render={(props) => ( <Page2 text = {this.props.text.Page2} {...props} />)} /> <Route path = "/three" render={(props) => ( <Page3 text = {this.props.text.Page3} {...props} />)} /> <Route path = "/four" render={(props) => ( <Page4 text = {this.props.text.Page4} {...props} />)} /> </BrowserRouter> ); } } 

And the very root component of the application:

 import Header from './pages/menu/Header'; import Routes from './Routes'; const texts = require('text.json'); sessionStorage.setItem('lang','UA'); export default class App extends React.Component { constructor(props) { super(props); this.state = { text: texts.UA }; this.langHandler = this.langHandler.bind(this); } langHandler() { if (sessionStorage.lang === 'UA') { sessionStorage.setItem('lang','RU'); this.setState({ text: texts.RU }) } else { sessionStorage.setItem('lang','UA'); this.setState({ text: texts.UA }) } } render() { return ( <div id="content"> <Header changeLang = {this.langHandler} text = {this.state.text.header}/> <Routes text = {this.state.text}/> </div> ); } } 

In short, the fact is that the page always has a processed title, and below it, depending on the selected menu item, the corresponding component was displayed.

I would be grateful for any advice.

Answer 1

The component of your menu must be nested in the BrowserRouter component in order for the links to work in this context of the router.

Please take a look at a basic example: https://reacttraining.com/react-router/web/example/basic

Answer 2

Suppose we have the following:

 import { BrowserRouter as StaticRouter, Router, Switch, Route, Link } from 'react-router-dom'; import createBrowserHistory from 'history/createBrowserHistory'; const customHistory = createBrowserHistory(); 

Then, it seems like you need to wrap each nested block of links with

 <Router history={customHistory}> <div> <Link to={'/.../' + linkName1}> {itemName1} </Link> <Link to={'/.../' + linkName2}> {itemName2} </Link> </div> </Router>