[英]Uncaught Error: <Link>s rendered outside of a router context cannot navigate.(…) react
this is my app.js 这是我的app.js
import Index from './index'
import WeatherEng from './weatherEng'
import WeatherAr from './weatherAr'
import {Router, hashHistory, Route} from 'react-router'
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Index}>
<Route path="Arabic" component={WeatherAr}/>
<Route path="english" component={WeatherEng}/>
</Route>
</Router>, document.queryString('.container')
)
and this index .js 这个索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import $ from "min-jquery";
import axios from "axios";
import { render } from 'react-dom'
import WeatherEng from './weatherEng'
import WeatherAr from './weatherAr'
import {Link} from 'react-router';
const urlP=`http://localhost:3000/blah`;
class App extends React.Component {
constructor(props){
super(props);
this.state={
imagedayA:[],
imagenightA:[]
};
}
componentDidMount() {
axios.get(urlP)
.then(function (response) {
console.log(response.data,"this is response")
this.setState({
imagedayA:response.data.today.iconday,
imagenightA:response.data.today.iconnight,
})
}.bind(this))
.catch(function (response) {
console.log(response);
});
}
render(){
return (
<div>
<button><Link to="WeaAr">another</Link></button>
<button><Link to="WeaEng">English</Link></button>
<div>{this.props.children}</div>
</div>
);
};
}
render(<App/>,document.querySelector('.container'));
http://imgur.com/uPH1y1t I got new errors Uncaught TypeError: document.queryString is not a function(…) Warning: Failed propType: Invalid prop component
supplied to Route
. http://imgur.com/uPH1y1t我收到了新的错误Uncaught TypeError:document.queryString不是一个函数(…)警告:propType失败:提供给
Route
prop component
无效。 acctually the main idea is i want when click on another button it give yo component and when click on english button it move me to english component 正确的主要想法是我想要当单击另一个按钮时它给您组件,当单击英语按钮时,我将其移动到英语组件
I think your Link
contains wrong to
path, try this: 我认为您的
Link
包含错误to
路径,请尝试以下操作:
<button><Link to="Arabic">another</Link></button>
<button><Link to="english">English</Link></button>
And one more thing you are already rendering
your App component
through React Router
, no need to render
it again in App
component by this: 另外,您已经在通过
React Router
rendering
App component
了,不需要通过以下方式在App
组件中再次render
它:
render(<App/>,document.querySelector('.container'));
Remove this line. 删除此行。
Use this code: 使用此代码:
import Index from './index'
import WeatherEng from './weatherEng'
import WeatherAr from './weatherAr'
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Index}>
<Route path="Arabic" component={WeatherAr}/>
<Route path="english" component={WeatherEng}/>
</Route>
</Router>, document.getElementById('container')
)
Put this line in html file: <div id='container'></div>
将此行放在html文件中:
<div id='container'></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.