Der Kontext `router` ist in` Link` als erforderlich markiert, aber sein Wert ist `undefiniert`

Question

Ich habe ein Problem mit Link. Viele Themen gegoogelt, aber ich habe keine richtige Antwort bekommen. In einer Diskussion ist das Problem in der früheren Version des Routers, in der anderen im falschen Import von Komponenten, in der dritten wurde die Antwort nicht einmal angekündigt.

Auch, was ist mit der 'Geschichte'?

Versionen der Komponenten:

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

Fehler sind:

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> 
); 
} 
} 

:

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

und

Uncaught TypeError: Cannot read property 'history' of undefined 

Die Komponente, in Verbindung ziemlich primitiv verwendet wird, ist

So ist die Komponente mit dem Router wie folgt aussieht:

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> 
); 
} 
} 

Und die Wurzel Komponente der App:

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> 
    ); 
} 
} 

Kurz gesagt, der Punkt ist, dass die Seite immer ein gerendertes Kopf hat, und darunter wurde, abhängig vom gewählten Menüpunkt, die entsprechende Komponente gerendert.

Ich werde für jeden Rat dankbar sein.

Answer 1

Ihre Menükomponente sollte in der BrowserRouter-Komponente verschachtelt sein, damit die Links in diesem Routerkontext funktionieren.

Bitte nehmen Sie sich einen Blick auf dem Grunde Beispiel: https://reacttraining.com/react-router/web/example/basic

Answer 2

Wir gehen davon aus, dass wir die folgende haben:

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

Dann sieht es so aus, dass es notwendig ist, alle verschachtelten Block zu wickeln Verbindungen mit

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