[react][react-router-dom]A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element

背景

制作简书项目，router报错

import React, { Component } from 'react';
import Header from './common/header';
import { GlobalIcon } from './statics/iconfont/iconfont.js'
import store from './store';
import { Provider } from 'react-redux';
import { Routes, BrowserRouter, Route } from 'react-router-dom';
import Detail from './pages/detail';
import Home from './pages/home';
class App extends Component {
  render() {
    return (
      <div>
        <Provider store={store}>
          <Header />
          <BrowserRouter>
            <div>
              <Header />
              <Route path='/' exact component={Home}></Route>
              <Route path='/detail/:id' exact component={Detail}></Route>
            </div>
          </BrowserRouter>
        </Provider >
        <GlobalIcon />
      </div >
    );
  }
}

export default App;

操作

修改代码如下

import React, { Component } from 'react';
import Header from './common/header';
import { GlobalIcon } from './statics/iconfont/iconfont.js'
import store from './store';
import { Provider } from 'react-redux';
import { Routes, BrowserRouter, Route } from 'react-router-dom';
import Detail from './pages/detail';
import Home from './pages/home';
class App extends Component {
  render() {
    return (
      <div>
        <Provider store={store}>
          <Header />
          <BrowserRouter>
            <Routes>

              <Route exact path="/" element={<Home />} />
              <Route exact path="/detail" element={<Detail />} />
            </Routes>
          </BrowserRouter>,
        </Provider >
        <GlobalIcon />
      </div >
    );
  }
}

export default App;

参考链接

https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md