Javascript 未捕获错误:<;链接>;在路由器上下文之外呈现的无法导航。(…;)响应
这是我的app.jsJavascript 未捕获错误:<;链接>;在路由器上下文之外呈现的无法导航。(…;)响应,javascript,reactjs,react-native,react-router,Javascript,Reactjs,React Native,React Router,这是我的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="/" c
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')
)
从“./Index”导入索引
从“./WeatherEng”导入WeatherEng
从“./WeatherAr”导入WeatherAr
从“react Router”导入{Router,hashHistory,Route}
ReactDOM.render(
,document.queryString(“.container”)
)
这个index.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'));
从“React”导入React;
从“react dom”导入react dom;
从“min jquery”导入$;
从“axios”导入axios;
从'react dom'导入{render}
从“./WeatherEng”导入WeatherEng
从“./WeatherAr”导入WeatherAr
从“反应路由器”导入{Link};
常量urlP=`http://localhost:3000/blah`;
类应用程序扩展了React.Component{
建造师(道具){
超级(道具);
this.state={
imagedayA:[],
imagenightA:[]
};
}
componentDidMount(){
axios.get(urlP)
.然后(功能(响应){
console.log(response.data,“这是响应”)
这是我的国家({
imagedayA:response.data.today.iconday,
imagenightA:response.data.today.iconlight,
})
}.绑定(本)
.catch(函数(响应){
控制台日志(响应);
});
}
render(){
返回(
另一个
英语
{this.props.children}
);
};
}
渲染(
我收到了未捕获的新错误TypeError:document.queryString不是函数(…)
警告:失败的道具类型:无效的道具组件
提供给路线
。
实际上,主要的想法是,当我点击另一个按钮时,它会给你一个组件,当我点击英语按钮时,它会把我移到英语组件,我想你的链接包含错误的到路径,试试这个:
<button><Link to="Arabic">another</Link></button>
<button><Link to="english">English</Link></button>
将这一行放在html文件中:
你是否在app.js文件中导入了ReactDOM
,因为在你的代码中它不存在??如果不使用这些行:import React from'React';import ReactDOM from'React dom';
ya我现在导入它同样的东西不工作重新打开我放置它的链接你会看到错误的app.js从“./Index”导入索引从“./Index”导入WeatherEng从“./WeatherEng”导入WeatherAr从“.react dom”导入ReactDOM;从“react dom”导入react;从“react Router”ReactDOM.render(,document.querySelector('.container')导入{Router,hashHistory,Route})使用以下命令:document.getElementById('container')
并将此行放入html文件:
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')
)