react router dom issuein react js

Viewed 34

When I render just one component (App or Send) everything is ok, but when I use react router dom it returns this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

import React from "react";
import { render} from "react-dom";
import App from  './components/app';
import Send from  './components/sendMoney';
import {
    BrowserRouter,
    Route,
    Switch
} from 'react-router-dom';


render(<BrowserRouter>
        <Switch>
            <Route path="/transact" component={Send}/>
            <Route path="/" component={App}/>
        </Switch>
    </BrowserRouter>,document.getElementById('root'));

Edit: Error is in line 12, render(....

App component:

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Axios } from 'axios';
import axios from 'axios';
import Blocks from './blocks';
class App extends Component {
    state = { 
        walletInfo:{
            address:"",
            balance:"",
        }
     } 
     async componentDidMount(){
        const response=await axios.get('http://localhost:3000/api/wallet-info');
        //console.log(response);
        this.setState({walletInfo:response.data});
     }
    render() { 
        return (
        <>
            <div className='container-fluid'>
                <div className='shadow m-3 bg-info p-3 rounded-3'>
                    <h1 className='text-secondry'>Your wallet info:</h1>
                    <div className='row'>
                        <div className='col-12'>
                            <h3>address:</h3> <div className='text-light '><h5>{this.state.walletInfo.address}</h5></div>
                        </div>
                        <div className='col-12'>
                            <h3>balance:</h3> <div className='text-light'><h5>{this.state.walletInfo.balance}</h5></div>
                        </div>
                    </div>
                </div>
            </div>
            <Blocks/>
        </>
        );
    }
}
 
export default App;
0 Answers
Related