How can I go, be redirected to another component by pressing the button in react, chrome extension?

Question

I create chrome extension in Rect. How can I go, be redirected to another component by pressing the button in react, chrome extension?

How can I go, be redirected from the App component (after pressing the button) to the ItemDetails component? Without using conditions (ternary operator).

I found such an article: Routing in Chrome Extension written in React

import { 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
}

I do not understand this this.state.page. If I want to go to another component, how can I get this this.state.page. How do I save the component name in the state it wants to go to?

Code here

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

You need to use Routes to redirect to other component. You can make route like,

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


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

In component where you have button to redirect, you need to use 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)

Demo

Note: Don't use action="" method="post" on form.

Answer 2

You can use react-router-dom. First when you install router you need to import few things.

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

Than you need to setup different routes for pages for example:

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

In your app component onSubmit function you can use history object to push user to the specific page:

onSubmit = () => {
  this.props.history.push('/details');
};

Answer 3

You need to add a handler method onSubmit:

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      currentPage: "Page Name A",
      items: [
        {
          name: 'A',
          description: 'Hello'
        }
      ],
      form: {}
    };
  }

  onSubmit = (event) => {
    this.setState({ currentPage: "Page Name B" })
    event.preventDefault();
  }

  render() {

    return (
      <div>
          {this.state.currentPage}
          <form action="" method="post" onSubmit={this.onSubmit}>
            <input type="submit" value="Log in" />
          </form>  
      </div>
    );
  }
}


render(<App />, document.getElementById('root'));

https://stackblitz.com/edit/react-itkyhq?file=index.js

onSubmit does two things:

1. Set the name of the page to the state
2. Prevents the post request (react will handle the form)

Note: You can also remove action and method from <form /> since it will not be used.

Learn more about setState, forms and handling events in the docs.

Answer 4

Use Router to redirect to another page or component...

this will route your path....

For complete router options go to link