Routing in Chrome Extension written in React

Question

I want 2 pages in my Chrome extension. For example: first(default) page with list of users and second with actions for this user.

I want to display second page by clicking on user(ClickableListItem in my case). I use React and React Router. Here the component in which I have:

class Resents extends React.Component {
constructor(props) {
  super(props);
  this.handleOnClick = this.handleOnClick.bind(this);
}
handleOnClick() {
  console.log('navigate to next page');
  const path = '/description-view';
  browserHistory.push(path);
}
render() {
  const ClickableListItem = clickableEnhance(ListItem);
  return (
    <div>
      <List>
        <ClickableListItem
          primaryText="Donald Trump"
          leftAvatar={<Avatar src="img/some-guy.jpg" />}
          rightIcon={<ImageNavigateNext />}
          onClick={this.handleOnClick}
        />
      // some code missed for simplicity
      </List>
    </div>
  );
}
}

I also tried to wrap ClickableListItem into Link component(from react-router) but it does nothing.

Maybe the thing is that Chrome Extensions haven`t their browserHistory... But I don`t see any errors in console...

What can I do for routing with React?

Answer 1

I know this post is old. Nevertheless, I'll leave my answer here just in case somebody still looking for it and want a quick answer to fix their existing router.

In my case, I get away with just switching from BrowserRouter to MemoryRouter. It works like charm without a need of additional memory package!

import { MemoryRouter as Router } from 'react-router-dom';

ReactDOM.render(
    <React.StrictMode>
        <Router>
            <OptionsComponent />
        </Router>
    </React.StrictMode>,
    document.querySelector('#root')
);

You can try other methods, that suits for you in the ReactRouter Documentation