反应路由器错误:您不应该在路由器之外使用路由

Posted

技术标签:

【中文标题】反应路由器错误:您不应该在路由器之外使用路由【英文标题】:React Router Error: You should not use Route outside of Router 【发布时间】:2018-11-05 19:14:35 【问题描述】:

我只是在我的 react 应用程序中做一些基本的路由,我以前也这样做过,所以我很困惑为什么它现在不起作用。

我得到的错误是:You should not use <Route> or withRouter() outside a <Router>

我确定这是超级基本的,所以谢谢你和我一起裸露!

import React from 'react'
import  Route  from 'react-router-dom'
import  Link  from 'react-router-dom'
import * as BooksAPI from './BooksAPI'
import BookList from './BookList'
import './App.css'

class BooksApp extends React.Component 
  state = 
    books: []
  

  componentDidMount() 
    this.getBooks()
  

  getBooks = () => 
    BooksAPI.getAll().then(data => 
      this.setState(
        books: data
      )
    )
  


  render() 
    return (
      <div className="App">
        <Route exact path="/" render=() => (
          <BookList
            books=this.state.books
          />
        )/>
      </div>
    )
  


export default BooksApp

【问题讨论】:

【参考方案1】:

我面临着完全相同的问题。事实证明,在 App.js 中使用 Route 之前,我没有将 App 包裹在 BrowserRouter 中。

这是我在index.js 中修复的方法。

import BrowserRouter from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
  document.getElementById('root')
);

【讨论】:

【参考方案2】:

你需要为 react-router 设置上下文提供者

  import  BrowserRouter, Route, Link  from 'react-router-dom';

  // ....

  render() 
    return (
      <BrowserRouter>
        <div className="App">
          <Route exact path="/" render=() => (
            <BookList
              books=this.state.books
            />
          )/>
        </div>
      </BrowserRouter>
    )
  

附注 - BrowserRouter 应该放在应用程序的顶层并且只有一个子级。

【讨论】:

我会通过导入 Route 来澄清这一点,以澄清两者都是必需的。对于这个用例import BrowserRouter, Route, Link from 'react-router-dom'; 当然。我完全忘记将它添加到我的 index.js 文件中。太愚蠢了。非常感谢您的帮助!

以上是关于反应路由器错误:您不应该在路由器之外使用路由的主要内容,如果未能解决你的问题,请参考以下文章

未捕获错误:您不应该使用 或者在外面使用路由器()

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

尽管所有反应路由器版本冲突,如何在反应中进行服务器端渲染?

我应该使用快速、客户端反应路由器还是服务器端反应路由器?

嵌套反应路由器组件不会在页面重新加载时加载/渲染?

刷新反应应用程序,404 错误。反应路由器问题