时间戳

首页 > 解决方案 > 如何使用 Airtable.com reactjs 从一个页面导航到另一个页面

reactjs - 如何使用 Airtable.com reactjs 从一个页面导航到另一个页面

问题描述

首先在airtable中创建helloword。我使用了下面来自 airtable.com 示例的 helloword 代码，它工作正常，因为它成功显示了 hello world。

import {
    initializeBlock,
    useBase,
    useRecords,
} from '@airtable/blocks/ui';
import React, { Component } from 'react';

function HelloWorldBlock() {
    // YOUR CODE GOES HERE
    return <div>Hello world </div>;
}

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

现在我想实现页面导航，因此 当我通过块运行运行代码时，我有 2 个页面（ home.js 和 access.js）链接到index.js 。它显示

我的空气表中的这个错误

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

这是 index.js 的代码

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="/home" component={Home} exact/>
            <Route path="/access" component={Access}/>

            <Route component={Error}/>
           </Switch>
        </div> 
      </BrowserRouter>
);



}

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

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

*/

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


*/

标签： reactjs

解决方案

使用 hashrouter 而不是浏览器路由器解决了问题，所以我更换了

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

和

import { Route,NavLink, HashRouter} from "react-router-dom";

还将 browserRouter 元素替换为 HashRouter 元素，例如。

<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="/home" component={Home} exact/>
            <Route path="/access" component={Access}/>

            <Route component={Error}/>
           </Switch>
        </div> 
      </BrowserRouter>

和

<HashRouter>Route goes here....
</HashRouter>

推荐阅读