我怎样才能通过在 react、chrome 扩展中按下按钮来重定向到另一个组件？

Question

我在 Rect 中创建了 chrome 扩展。我怎样才能通过在 react、chrome 扩展中按下按钮来重定向到另一个组件？我怎样才能从App组件（按下按钮后）重定向到ItemDetails组件？不使用条件（三元运算符）。我找到了这样一篇文章：Routing in Chrome Extension write in Reactimport { createMemoryHistory } from 'history'const history = createMemoryHistory()render() {  let page = null  switch (this.state.page) {  case 'home':    page = <Home />    break  case 'user':    page = <User />    break  }  return page}我不明白这一点this.state.page。如果我想转到另一个组件，我怎样才能得到这个this.state.page. 如何将组件名称保存在它想要进入的状态？import React, { Component } from 'react';import { render } from 'react-dom';import axios from 'axios';class ItemDetails extends Component {  constructor(){    super();  }  render() {    return (        <div>        <p>            Description:vvvvvvvvvvv        </p>      </div>    )  }}class App extends React.Component {  constructor() {    super();    this.state = {      items: [        {          name: 'A',          description: 'Hello'        }      ],      form: {}    };  }  render() {    return (      <div>         <form action="" method="post" onSubmit={this.onSubmit}>            <button type="submit" value="Submit" >Log in</button>          </form>        </div>    );  }}render(<App />, document.getElementById('root'));

Answer 1

您需要使用Routes重定向到其他组件。你可以让路线像，

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

<BrowserRouter>

   <Switch>

      <Route exact path='/' component={Dashboard} />

      <Route exact path='/itemDetails' component={ItemDetails} />

   </Switch>

</BrowserRouter>

在具有重定向按钮的组件中，您需要使用withRouter.

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

class Dashboard extends React.Component {

  onSubmit = () => {

    this.props.history.push('/itemDetails');

  }

  render() {

    return (

      <div>

         <form onSubmit={this.onSubmit}>

            <button type="submit" >Log in</button>

          </form> 

      </div>

    );

  }

}

export default withRouter(Dashboard)

演示

注意：不要action="" method="post"在表格上使用。

Answer 2

您可以使用 react-router-dom。首先，当您安装路由器时，您需要导入一些东西。

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

比您需要为页面设置不同的路由，例如：

<BrowserRouter>

  <App>

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

    <Route path="/details" component={ItemDetails} />

  </App>

</BrowserRouter>

在您的应用程序组件 onSubmit 函数中，您可以使用 history 对象将用户推送到特定页面：

onSubmit = () => {

  this.props.history.push('/details');

};