未捕获的错误：您不应在 <Router> 之外使用 <Route> 或 withRouter()答案

【问题标题】：Uncaught Error: You should not use <Route> or withRouter() outside a <Router>未捕获的错误：您不应在 <Router> 之外使用 <Route> 或 withRouter()
【发布时间】：2018-03-07 01:16:27
【问题描述】：

我将 react-rails gem (v 2.3) 与 react-router-dom (v 4.2.2) 一起使用，并将我的根组件 App 安装在我的根 Rails 路由上。

这是它的安装方式：

<%= react_component("App") %>

这是组件本身：

const Router     = ReactRouterDOM.BrowserRouter,
  Route      = ReactRouterDOM.Route;

class App extends React.Component{
  render() {
    return (
      <Router>
        <Route path="/" component={Index}>
        </Route>
      </Router>
    );
  }
}

我不断收到以下错误：

Uncaught Error: You should not use <Route> or withRouter() outside a <Router>

我没有在上面的路由器组件中使用 Route 组件吗？索引组件是否有错误？

提前感谢您的帮助:)

【问题讨论】：

标签： ruby-on-rails react-router react-rails

【解决方案1】：

也许这不是正确的错误.. 尝试像这样覆盖您的应用程序

class App extends React.Component{
  render() {
    return (
      <Router>
        <Route path="/" component={Index} />
      </Router>
    );
  }
}

或者将Route 包裹在div 中

class App extends React.Component{
  render() {
     return (
       <Router>
         <div>
            <Route path="/" component={Index} />
         </div>
       </Router>
    );
  }
}

这里是docs

【讨论】：

【解决方案2】：

我遇到了类似的错误消息，但在不同的上下文中。我在这里发布我的修复，以防其他人遇到与我相同的情况。

我的问题是我有一个添加了两个元素的 App.js，但我忘记更新我的 index.js 文件。以前是：

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

我更新为：

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

其中还必须添加以下导入语句：

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

【讨论】：