1

I have a Drupal 10 site with one page at the following URL: localhost:9090/my-page. On that page, I have a Drupal block that includes a React app with its own Browser Router.

React BrowserRouter configuration:

<BrowserRouter basename="/my-page">
  <App />
</BrowserRouter>

React Routes:

<Routes>
  <Route index path="/demo-1" element={<DemoOne />} />
  <Route path="/demo-2" element={<DemoTwo />} />
</Routes>

When I access the My Page, the React App shows up, and I can use React Router normally, and the URL changes. The problem occurs when I reload the page; Drupal gives me a 404 error.

Example: localhost:9090/my-page/demo-1

I'm using Nginx, and perhaps I need some extra configuration for this scenario.

Final Note:

React APP is embed directly inside Drupal page with Drupal Block Plugin. So there is no index.html.

This is an example what I exactly need:

https://iap.unido.org/data/sdg-9-industry?p=LBY

Base is /data and /data/sdg-9-industry is some page inside React.

5
  • If there isn’t a Drupal page at that URL there will be a 404.
    – cilefen
    Sep 13, 2023 at 11:18
  • Hi @cilefen i understand that. But how it works when i access demo-1 from /my-page? thank you Sep 13, 2023 at 11:23
  • That’s because React router is making it appear as if you made a GET request there. That’s how JavaScript routers work—they do not always make HTTP requests.
    – cilefen
    Sep 13, 2023 at 11:46
  • Ok, do you have any suggestion or workaround to get this works or that's impossible? :/ Btw this is an example of Drupal CMS with React. Content area is React component /data iap.unido.org/data/sdg-9-industry?p=LBY Sep 13, 2023 at 12:10
  • Drupal Answers is a question-and-answer site. It is not a support forum or a discussion board.
    – cilefen
    Sep 13, 2023 at 12:43

1 Answer 1

1

There is a 404 because JavaScript routers can create paths in the browser which do not actually exist on the backend web application, and the router pushes those paths onto the browser history. For this to not be a 404 when reloading the browser, create the path on the Drupal site also.

This is nothing to do with Drupal specifically.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.