上下文`router`在`Link`中被标记为required，但它的值为`undefined` [英] The context `router` is marked as required in `Link`, but its value is `undefined`

问题描述

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

另外，历史"是怎么回事?

组件的版本:

"react": "^15.4","react-dom": "^15.4",反应路由器":^ 4.1.1"，反应路由器-dom":^ 4.1.1"

错误是:

警告:失败的上下文类型:上下文路由器"在链接"中被标记为必需，但它的值是`undefined`.

和

未捕获的类型错误:无法读取未定义的属性历史"

使用 Link 的组件非常原始:

从'react'导入React；从'react-router-dom'导入{链接}；导出默认类 Menu extends React.Component {构造函数(道具){超级(道具)；}使成为() {返回 (<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>

);}}

所以带有路由器的组件看起来像:

从'react'导入React；从'react-router-dom' 导入 { BrowserRouter, Route }从'./Page1'导入Page1；从 './Page2' 导入 Page2；从 './Page3' 导入 Page3；从 './Page4' 导入 Page4；导出默认类路由扩展 React.Component {构造函数(道具){超级(道具)；}使成为() {返回 (<BrowserRouter text = {this.props.text}><路由路径="/one"渲染={(道具)=>(<Page1 text = {this.props.text.Page1} {...props}/>)}/><路由路径="/two"渲染={(道具)=>(<Page2 text = {this.props.text.Page2} {...props}/>)}/><路由路径="/三"渲染={(道具)=>(<Page3 text = {this.props.text.Page3} {...props}/>)}/><路由路径="/four"渲染={(道具)=>(<Page4 text = {this.props.text.Page4} {...props}/>)}/></BrowserRouter>);}}

以及 App 的最根组件:

import Header from './pages/menu/Header';从'./Routes'导入路由；const texts = require('text.json');sessionStorage.setItem('lang','UA');导出默认类 App 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {文字:texts.UA};this.langHandler = this.langHandler.bind(this);}langHandler() {如果(sessionStorage.lang === 'UA'){sessionStorage.setItem('lang','RU');this.setState({ text: texts.RU })} 别的 {sessionStorage.setItem('lang','UA');this.setState({ text: texts.UA })}}使成为() {返回 (<div id="内容"><Header changeLang = {this.langHandler}text = {this.state.text.header}/><路由文本 = {this.state.text}/>

);}}

简而言之，重点是页面总是有一个渲染的Header，在它下面，根据选择的菜单项，渲染了相应的组件.

我将不胜感激任何建议.

解决方案

您的 Menu 组件应该嵌套在 BrowserRouter 组件中，以便 Links 在此 Router 上下文中工作.

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

I have a problem with Link. Googled a lot of topics, but I did not get a correct answer. In one discussion, the problem is in the earlier version of the router, in the other in the wrong import of components, in the third the answer was not even announced.

Also, what's with the 'history'?

Versions of the components:

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

Errors are:

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 where Link is used is quite 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:

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 most root component of the 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>
    );
}
}  

In short, the point is that the page always has a rendered Header, and below it, depending on the selected menu item, the corresponding component was rendered.

I will be grateful for any advice.

解决方案

Your Menu component should be nested inside the BrowserRouter component for the Links to work within this Router context.

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

这篇关于上下文`router`在`Link`中被标记为required，但它的值为`undefined`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！