Navigating from one page to another with airtable reactjs

How to navigate from one page to another with Airtable reactjs

I have 2 pages(home.js and access.js) linked to index.js

when I run the code via block run. it says Bundle updated but am seeing

this error in my airtable

Error: Objects are not valid as a React child (found: Error: [object Object]).

 If you meant to render a collection of children, use an array instead.

    in Error (created by Context.Consumer)

    in Route (created by HelloWorldBlock)

    in Switch (created by HelloWorldBlock)

    in div (created by HelloWorldBlock)

    in Router (created by BrowserRouter)

    in BrowserRouter (created by HelloWorldBlock)

    in HelloWorldBlock

    in div (created by BlockWrapper)

    in Suspense (created by BlockWrapper)

    in BlockWrapper (created by ForwardRef)

    in ForwardRef

	throwOnInvalidObjectType@https://localhost:9000/__runFrame/bundle.js:59956:15

	reconcileChildFibers@https://localhost:9000/__runFrame/bundle.js:60856:31

Here is the code

index.js

import {

    initializeBlock,

    useBase,

    useRecords,

} from '@airtable/blocks/ui';

import React, { Component } from 'react';

import { BrowserRouter, Route, Switch, NavLink} from 'react-router-dom';

import ReactDOM from 'react-dom';



import Home from './home';

import Access from './access';



function HelloWorldBlock() {

    // YOUR CODE GOES HERE

    //return <div>Hello world brother </div>;





    return (

<BrowserRouter>



<div>Hello world brother </div>





<div className="container">

<div className="heading"> 

     

  <div className="heading-right">



<NavLink to="/home">Home</NavLink>

<NavLink to="/access">Home</NavLink>





 </div>

</div>





 <Switch>

             <Route path="/" component={Home} exact/>

            <Route path="/access" component={Access}/>

   

            <Route component={Error}/>

           </Switch>

        </div> 

      </BrowserRouter>

);







}



initializeBlock(() => <HelloWorldBlock />);

here is home.js

import {initializeBlock,

    useBase,

    useRecords,

} from '@airtable/blocks/ui';





import React, { Component } from 'react'

import {NavLink} from 'react-router-dom';



export default class Home extends Component {

state = {



  }



componentDidMount() {}



render(){



    return (





      <div>



        <h1>

         Welcome to home page

        </h1>



 

        

      </div>



    )

  }







}









/*

function Home() {

    // YOUR CODE GOES HERE

    return <div>Hello welcome to home page </div>;

}



initializeBlock(() => <Home />);



*/

here is access.js

import {initializeBlock,

    useBase,

    useRecords,

} from '@airtable/blocks/ui';





import React, { Component } from 'react'

import {NavLink} from 'react-router-dom';



export default class Access extends Component {

state = {}

componentDidMount() {

}



render(){

return (

<div>

<h1>

hello welcome to Access Page

        </h1>

</div>



    )

  }







}









/*



function Access() {

    // YOUR CODE GOES HERE

    return <div>Welcome to Access Page </div>;

}



initializeBlock(() => <Access />);





*/