Navigating from one page to another with airtable reactjs

[Fredrick_Esedo]

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 />);


*/

[Leo_Lutz · Accepted solution]

That error is because you didn’t define Error for <Route component={Error}/>, so it was using the default Error object from the browser.

Once I commented that out, it rendered, but following links didn’t work. I changed from BrowserRouter to MemoryRouter and all was well. Well, except your link for Home should just be /, but I’m sure you would have figured that out.

[Fredrick_Esedo]

Thanks Brother. You have saved my day