reactjs - 上下文 `router` 在 `Link` 中被标记为必需，但其值为 `undefined`

Question

我的链接有问题。谷歌搜索了很多话题，但没有得到正确的答案。在一次讨论中，问题出在路由器的早期版本中，在另一次讨论中，问题出在错误的组件导入中，在第三次讨论中，甚至没有公布答案。

还有，“历史”是怎么回事？

组件的版本:

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

错误是:

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

和

Uncaught TypeError: Cannot read property 'history' of undefined

使用 Link 的组件非常原始:

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

因此带有路由器的组件如下所示:

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

以及应用程序最根的组件:

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

简而言之，重点是页面始终有一个渲染的 Header，并且在其下方，根据所选的菜单项，渲染相应的组件。

如果您有任何建议，我将不胜感激。

Answer 1

您的菜单组件应嵌套在 BrowserRouter 组件内，以便链接在此路由器上下文中工作。

请看一下基本示例: https://reacttraining.com/react-router/web/example/basic