Kontekst `router` jest oznaczony jako wymagany w` Link`, ale jego wartość jest `niezdefiniowana`

Question

Mam problem z linkiem. Google prowadziło wiele tematów, ale nie otrzymałem poprawnej odpowiedzi. W jednej z dyskusji problem tkwi we wcześniejszej wersji routera, w innym w niewłaściwym importowaniu komponentów, w trzeciej odpowiedź nie została nawet ogłoszona.

Co jest z "historią"?

Wersje składników:

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

Błędy są:

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

i

Uncaught TypeError: Cannot read property 'history' of undefined 

Komponent gdzie służy Link jest dość prymitywne:

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

Więc składnik z routera wygląda następująco:

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

A najbardziej główny składnik 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> 
    ); 
} 
} 

W skrócie, chodzi o to, że strona ma zawsze renderowany nagłówka, i poniżej, w zależności od wybranej pozycji menu, odpowiedni komponent został wyrenderowany.

Będę wdzięczny za wszelkie porady.

Answer 1

Twój komponent Menu powinien być zagnieżdżony w komponencie BrowserRouter, aby łącza działały w tym kontekście routera.

Proszę spojrzeć na próbce podstawowej: https://reacttraining.com/react-router/web/example/basic

Answer 2

Zakładamy, że mamy następujące:

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

Następnie, wygląda na to, że konieczne jest, aby owinąć każdą zagnieżdżony blok łącza z

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