7
मुझे लिंक के साथ समस्या है। बहुत सारे विषयों को गुगल किया, लेकिन मुझे सही जवाब नहीं मिला। एक चर्चा में, समस्या राउटर के पुराने संस्करण में है, दूसरी तरफ घटकों के गलत आयात में, तीसरे में जवाब भी घोषित नहीं किया गया था।संदर्भ 'राउटर` को `लिंक` में आवश्यक के रूप में चिह्नित किया गया है, लेकिन इसका मान` अपरिभाषित'
इसके अलावा, 'इतिहास' के साथ क्या है?
घटकों के संस्करण:
"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
घटक जहां लिंक प्रयोग किया जाता है काफी आदिम है:
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>
);
}
}
संक्षेप में, मुद्दा यह है कि पेज हमेशा एक गाया हैडर है, और इसके नीचे, चयनित मेनू आइटम के आधार पर, इसी घटक को प्रस्तुत किया गया था।
मैं किसी भी सलाह के लिए आभारी रहूंगा।