Question

首先在airtable中创建问候词。我使用了airtable.com示例中的以下helloword代码，因为它可以成功显示hello世界，因此效果很好。

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


*/

Answer 1

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

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

使用

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

也用HashRouter元素（例如）替换browserRouter元素。

<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>

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

1 个答案: