Question

我只是在我的反应应用程序中做了一些基本的路由，我之前已经这样做了，所以我很困惑，为什么它现在还没有工作。

我得到的错误是：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

Answer 1

您需要为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应放在应用程序的顶层，并且只有一个孩子。

Answer 2

我遇到了完全相同的问题。事实证明，在 App.js 中使用 App 之前，我没有将 BrowserRouter 包裹在 Route 中。

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

import {BrowserRouter} from 'react-router-dom';

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

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

2 个答案: