React router with query params

[npearson72]

I'm trying to use the useNavigate hook in react router and I need to be able to pass/parse query params. It works in the a standard window, but not in the extension. Probably not WXT specific, but any advice on this would be appreciated.

[greatInvoker]

Problem Analysis

The pages of browser extensions (such as popup pages, options pages) run in a sandboxed environment. The URL format is different from that of standard web pages (for example: chrome - extension://your - extension - id/popup.html). The React Router uses the HTML5 History API by default, but the extension environment may not support it or has limitations, resulting in the failure to parse query parameters properly.

Solutions

1. Use Hash Router instead of Browser Router

The extension environment has limited support for history.pushState. Using Hash Router (the path after #) can avoid this problem.

// Use HashRouter in the extension project
import { HashRouter as Router, Routes, Route } from'react - router - dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/details" element={<Details />} />
      </Routes>
    </Router>
  );
}

2. Manually handle query parameters

If there are still problems with Hash Router, you can parse the query parameters in the URL manually:

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

function Details() {
  const location = useLocation();
  // Manually parse query parameters
  const searchParams = new URLSearchParams(location.search);
  const id = searchParams.get('id');

  return <div>Details for ID: {id}</div>;
}

3. Use WXT's defineRoute helper function

If you are using the WXT framework, you can use its routing system to handle the particularities of the extension environment:

// wxt.config.ts
import { defineConfig } from 'wxt';

export default defineConfig({
  // Configure routes
  routes: [
    {
      path: '/popup.html',
      component: './src/popup/Popup.tsx',
    },
    {
      path: '/details.html',
      component: './src/pages/Details.tsx',
    },
  ],
});

4. Directly use URL manipulation

In the extension environment, sometimes directly manipulating the URL is more reliable:

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

function MyComponent() {
  const navigate = useNavigate();
  const location = useLocation();

  // Directly add query parameters to the URL
  const handleClick = () => {
    navigate({
      pathname: '/details',
      search: '?id = 123&name = test',
    });
  };

  // Parse query parameters
  const searchParams = new URLSearchParams(location.search);
  const id = searchParams.get('id');

  return (
    <div>
      <button onClick = {handleClick}>Go to Details</button>
      <p>Current ID: {id}</p>
    </div>
  );
}

Notes

1. Extension manifest configuration: Make sure that the activeTab or tabs permission is declared in manifest.json (if you need to access the URL of the current tab).
2. Cross - environment compatibility: Different routing strategies may be needed in the extension and standard web page. They can be distinguished by environment variables.
3. Debugging skills: Use the developer tools of the extension (right - click the extension icon → Inspect popup content) to debug routing problems.

If the problem still exists, you may need to consider using a more lightweight routing library suitable for the extension environment, such as history, or manually implement simple routing logic.

[npearson72]

Awesome answer. Thank you.

[aklinker1]

Um, there's a lot of stuff wrong here.

The paragraph on hash routing is the only correct thing, and is probably the cause of your problems. See WXTs docs: https://wxt.dev/guide/essentials/frontend-frameworks.html#configuring-routers

Manually handle query parameters

Should not be necessary, all the router libraries should work just fine in hash mode.

Use WXT's defineRoute helper function

WXT doesn't have a defineRoute util, and the example doesn't even use it. The routes config in the example doesn't exist either.

[npearson72]

How would you then get the query params from the hashed routes? Or is that possible using react router's hooks?

PS: Thanks for adding clarification.

[aklinker1]

I'm not familiar with react-router, but I imagine it has a useQuery hook, right? Code-wise, everything is the same regardless of the routing mode you use.

Edit: see https://reactrouter.com/api/hooks/useSearchParams

[npearson72]

@aklinker1 thanks. I realized I was leaning to hard on URL params in my regular we app. So I've tuned it now to use params as a way to share a link, but not what the main router depends on. That change sorted things out so now my extension works as expected. Thanks for the feedback.

And thanks for the awesome library!