Your file couldn’t be accessed

[peter-palmer]

Hi there.

I have configured a React Router Dom on the Options page.

All works fine in the main route (options.html) until I create new routes, such as /options.html/profile.

When I refresh the page there is a message that says: Your file couldn’t be accessed.

Note: if I make an <Link> element from the main page and redirect it to the /profile path all works fine also, the problem is when the browser executes a refresh.

How can I solve this? Thanks in advance.

[estebanrao]

Have you tried using MemoryRouter as Router, instead of BrowserRouter? This solved my problem in my case (using a popup) Basically, it will change routes on memory and not redirect the browser to other routes.

[estebanrao]

I don't think this will solve the issue when refreshing the page though... you'd probably want to try params instead of URLs and route accordingly once the script loads. Or maybe static routes.

[peter-palmer]

I have used MemoryRouter instead of BrowserRouter. (using react-router-dom v6.2.1)

So the code looks like this:

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

<MemoryRouter>
   <Routes>
      <Route path="/" element={<Home />} />
   </Routes>
</MemoryRouter>

[KrishEnacton]

Hi, I am not able to access route Here is my code SS: https://i.imgur.com/p8zFsMX.png

import React, { useState } from 'react';
import { Route, Routes } from 'react-router-dom';
import { MemoryRouter } from 'react-router';
import SingleProduct from './AmazonPopup/SingleProduct';
import './Options.css';

const Options = () => {
  const [result, setResult] = useState({});

  chrome.runtime.onMessage.addListener(function (request) {
    if (request.type === 'SEND_DATA_TO_WINDOW') {
      setResult(request.payload);
      console.log(request.payload);
    }
  });

  return (
    <MemoryRouter>
      <Routes>
        <Route path="/" element={<SingleProduct />} data={result}></Route>
        <Route path="/demo" element={<SingleProduct />} data={result}></Route>
      </Routes>
    </MemoryRouter>
  );
};

export default Options;