Unable to render the page using react-router-dom in a Chrome Extension

Question

I am creating a Chrome extension using React and React Router DOM. Whenever I integrate the React Router DOM code in index.js it fails to render anything. The problem does not seem to be with the Components as it works without the Router-DOM code.

index.js

import Routes from './Routes';

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

Routes.js

const Routes = () => (
  <BrowserRouter>
    <Switch>
        <Route exact path='/' component={App}/>
        <Route path='/home' component={Home}/>
    </Switch>
  </BrowserRouter>
)

export default Routes;

App.js

class App extends Component {

  render() {
    return (
        <div className="App">
          <header>
            <img src={logo} className="App-logo" alt="logo" />
            <p>TITLE</p>
          </header>
          <p className="App-center">SOME TEXT</p>
          <Link to='/home'>Log In</Link>
        </div>
    );
  }
}

export default App;

Home.js

class Home extends Component {
  render() {
    return (
      <div className="App">
        <header>
          <img src={logo} className="App-logo" alt="logo" />
          <p className="App-title">TITLE 2</p>
          <h2>SOME HEADING</h2>
        </header>

        <p className="App-center">SOME TEXT</p>
        <Link to='/'>Log Out</Link>        
      </div>
    );
  }
}

export default Home;

Try to use just instead of in the render method of the index.js — Alee, Sep 27 '18 at 11:49
Extension pages aren't served by a server so they don't have anything at `/`. Try specifying the actual root page file name. — wOxxOm, Sep 27 '18 at 12:50
I ve managed to make it work. Created an intermediate file which has `Routes.js` and `App.js`. This component is in `index.js`. — Sushant Kumar, Sep 27 '18 at 13:25

score 2 · Answer 1 · answered Sep 06 '19 at 10:33

Just to mention, it's better to create a history for your router.

As @wOxxOm mentioned, chrome extensions won't be served with a server to handle History Fallback, as a solution for that, always use createMemoryHistory instead of createBrowserHistory when you develop Chrome extensions.

If we translate what I explained above to the code, then it should be something like this:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import { createMemoryHistory /* , createBrowserHistory */ } from 'history';
import App from './src/App';

const history = createMemoryHistory(); // Instead of createBrowserHistory();

// Render the app with a router
ReactDOM.render(
    <Router history={history}>
        <App />
    </Router>,
    document.getElementById('app')
);

Unable to render the page using react-router-dom in a Chrome Extension

1 Answers1