未捕获的错误：在路由器上下文之外呈现的 <Link> 无法导航。（…）反应

Posted 2023-02-22

【中文标题】未捕获的错误：在路由器上下文之外呈现的 <Link> 无法导航。（…）反应

【英文标题】：Uncaught Error: <Link>s rendered outside of a router context cannot navigate.(…) react

【发布时间】：2017-06-22 00:23:51

【问题描述】：

这是我的 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')
)

这个索引.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 我收到了新错误 Uncaught TypeError: document.queryString is not a function(...) 警告：失败的 propType：无效的 prop component 提供给 Route。 实际上主要的想法是我想要当点击另一个按钮时它给你组件，当点击英文按钮时它把我移动到英文组件

【参考方案1】：

我认为您的Link 包含错误的to 路径，试试这个：

<button><Link to="Arabic">another</Link></button>
<button><Link to="english">English</Link></button>

还有一件事，你已经是rendering 你的App component 到React Router，不需要在App 组件中再次render 它：

render(<App/>,document.querySelector('.container')); 删除此行。

使用此代码：

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')
)

将此行放入html文件中：<div id='container'></div>

【讨论】：

你是否在 app.js 文件中导入了ReactDOM，因为在你的代码中它不存在？？如果不使用这些行：import React from 'react'; import ReactDOM from 'react-dom';

是的，我现在导入它是一样的

不，它不工作重新打开我放的链接你会看到错误

现在这是 app.js 导入索引 from './index' import WeatherEng from './weatherEng' import WeatherAr from './weatherAr' import ReactDOM from 'react-dom';从“反应”导入反应； import Router, hashHistory, Route from 'react-router' ReactDOM.render( ,document.querySelector('.container') )

使用这个：document.getElementById('container') 并将这一行放在 html 文件中：<div id='container'></div>