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