404 error when using symfony and react router

user_13147466 0
Viewed 81

I am getting a 404 error when refreshing the site on routes other then "/"

I am using symfony and react router.

I have added prioity into the route but this does not seem to help

This is the default controller

class DefaultController extends AbstractController{
/**
 * @Route("/{reactRouting}", name="home", priority="-1" ,defaults={"reactRouting": null}, requirements={"reactRouting"=".+"})
 */
public function index()
{
    return $this->render('default/index.html.twig');
}}

This is the Main.js file

import React from 'react';
import Home from "./src/Pages/Home.js"
import Components from "./src/Pages/Components";
import Contact from "./src/Pages/Contact";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const Main = () => {
    return (
        <div className='App overflow-clip'>
            <Router>
                <Routes>
                    <Route path='/' element={<Home />} />
                    <Route path='/components' element={<Components />} />
                    <Route path='/contact' element={<Contact />} />
                </Routes>
            </Router>
        </div>
    );
};

export default Main;

When i go to

http://dev.symfony-react.com/ - it works fine

then i click on a link on that page it will take be fine to

http://dev.symfony-react.com/contact

If i then refresh that page it returns a 404 error

Thanks in advance

react-router-dom symfony reactjs http-status-code-404 php
1 Answers

When you navigate in your app by clicking on links, it is handled by react router only and the urls are pushed into your address bar. When you refresh your page, it goes both through the symfony router and subsequently through the react router (if configured correctly).

Depending on the origin of the 404 error, there are a few possible issues:

  • a generic webserver 404 page: you are probably not rewriting your urls to index.php correctly, see Symfony web server configuration
  • symfony 404 page: there is a problem with your default symfony controller route definition or there is another conflicting route (other controllers or routes.yaml?). Symfony routing - Debugging routes
  • react 404 catchall page: that doesn't seem to be the case here.
user_39728860
Related