React Вы не должны использовать <Route>или withRouter () вне <Router>

Question

Что я здесь делаю не так? Я получаю эту ошибку. Вы не должны использовать or withRouter () вне a, у меня нет withRouter нигде. index. js

const AppWrapper = () => {
    return (
        <Provider store={store}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </Provider>

        );  
}


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

Приложение js

import React, { Component } from 'react';
import { Route } from 'react-router';
import Home from './components/Home'; 
import { Layout } from './components/Layout';
import DocumentTypeList from './components/documentTypeList';
import KeywordTypeList from './components/keywordTypeList'; 
import Navigation from './components/NavigationBar'
import 'bootstrap/dist/css/bootstrap.min.css'

export default class App extends Component {
   displayName = App.name
    constructor(props) {
        super(props);
    }
   render() {
      return (
         <div>
          
              <Layout>
                 
                  <Route exact path="/" >
                      <Home />
                  </Route>
                   
                  <Route path="/DocumentTypes">
                      <DocumentTypeList />
                  </Route>
                  <Route path="/KeywordTypes">
                      <KeywordTypeList />
                  </Route>
            </Layout>
         </div>
      );
   }
}

 

Макет

import React, { Component } from 'react';
import { Col, Container, Row } from 'react-bootstrap';

export class Layout extends Component {
    displayName = Layout.name

    render() {
        return (
            <Container fluid>
                <Row>
                    <Col sm={12}>
                        {this.props.children}
                    </Col>
                </Row>
            </Container>
        );
    }
}

DocumenTypeList

import React, { Component } from 'react';
import { bindActionCraeators } from 'redux';
import { connect } from 'react-redux';

class DocumentTypeList extends Component {
    render() {
        return (
            <ul>
                <li>Document Type1</li>
                <li>Document Type2</li>

            </ul>
            );

    }
}
export default DocumentTypeList;

Пакет. json

"dependencies": {
    "@babel/runtime": "^7.5.5",
    "antd": "^3.20.7",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "jquery": "3.3.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.0",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^5.0.1",
    "react-router-redux": "^5.0.0-alpha.8",
    "react-scripts": "^1.1.5",
    "reactstrap": "^6.3.0",
    "redux": "^4.0.4",
    "redux-act": "^1.7.7",
    "redux-actions": "^2.6.5",
    "redux-thunk": "^2.3.0",

Answer 1

Похоже, вы импортируете маршрут из «response-router» вместо «response-router-dom» в приложении. js файл