错误：<Route> 元素仅用于路由器配置，不应在 react-router v4 中呈现

IT技术 javascript reactjs react-router
2021-05-20 22:47:14

试图将 react-router 从 2 升级到 4 并破坏了它，现在无法呈现我的应用程序。

让各种错误（最近的是：<Route> elements are for router configuration only and should not be rendered）

我也有错误，我的./路线呈现良好但当我刷新并说其他所有路线时都会炸毁Cannot GET /randomRoute

我正在创建一个 react 应用程序，我的主 index.js 文件（其中包含 ReactDOM.render）也包含路由，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import { Route } from 'react-router';
import { BrowserRouter as Router, Match, HashRouter } from 'react-router-dom'
import Header from './components/header';


import './index.scss';


class App extends React.Component {

  render() {
    return (
      <Router  history={HashRouter}>
        <div>
          <Route path={"/"} component={Header} />
        </div>
      </Router>
    );
  }
}

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

为什么我会得到当前的错误，任何人都可以给我一个简单的基础知识，我需要包含的基础知识只是为了让路由工作？它在版本 2 中工作，但我想升级，现在无法再次工作

2个回答

问题是您将历史对象指定为路由器类型。

从文档

<Router>使用 URL 的哈希部分（即 window.location.hash）来使您的 UI 与 URL 保持同步的A。

这类似于在 Router v2中将history指定为 hashHistory 时所做的操作。

此外，从 v4 开始，历史对象已被分离到一个单独的包中。

您可以使用BrowserRouter或HashRouter渲染您的路线。

如果您想使用BrowserRouter哪个<Router>使用 HTML5 历史 API（pushState、replaceState 和 popstate 事件）来使您的 UI 与 URL 保持同步，请将您的路由配置更改为以下内容。这与您在指定历史时所做的类似作为 Router v2 中的 browserHistory。

您还需要从“react-router-dom”导入路由。 

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Match, Route} from 'react-router-dom'
import Header from './components/header';


import './index.scss';

class App extends React.Component {

  render() {
    return (
      <Router >
        <div>
          <Route path={"/"} component={Header} />
        </div>
      </Router>
    );
  }
}

好吧，在 react router v4 中，API 是不同的。你必须像这样在你的 index.js 文件中定义它，

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
        <Switch>
            <Route path="/path/one" component={ComponentOne} />
            <Route path="/path/two" component={ComponentTwo} />
            <Route path="/" component={IndexComponent} />
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));

确保这里的顺序很重要。最后放一个最通用的。希望这可以帮助。快乐编码！

其它你可能感兴趣的问题
上一篇导出 Jest 和 ES6 未采用的默认其他路径 下一篇如何访问 React 中的方法进行单元测试