反应路由器错误:您不应该在路由器之外使用路由
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 文件中。太愚蠢了。非常感谢您的帮助!以上是关于反应路由器错误:您不应该在路由器之外使用路由的主要内容,如果未能解决你的问题,请参考以下文章