javascript - React Router Error: You should not use Route outside of Router - Stack Overflow

admin管理员组

文章数量:1384122

I'm just doing some basic routing in my react app and I've done it this way before so I'm pretty confused to as why it isn't working now.

The error I am getting says: You should not use <Route> or withRouter() outside a <Router>

I'm sure this is super basic so thanks for baring with me!

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: []
  }

  ponentDidMount() {
    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

I'm just doing some basic routing in my react app and I've done it this way before so I'm pretty confused to as why it isn't working now.

The error I am getting says: You should not use <Route> or withRouter() outside a <Router>

I'm sure this is super basic so thanks for baring with me!

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: []
  }

  ponentDidMount() {
    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

• javascript
• reactjs
• ecmascript-6
• react-router

Share Improve this question Follow asked May 26, 2018 at 17:17 Chris CampChris Camp 6511 silver badge99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You need to setup context provider for 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>
    )
  }

Side note - BrowserRouter should be placed at the top level of your application and have only a single child.

I was facing the exact same issue. Turns out that i didn't wrap the App inside BrowserRouter before using the Route in App.js.

Here is how i fixed in index.js.

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

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

本文标签： javascriptReact Router Error You should not use Route outside of RouterStack Overflow