Symfony + React + AdminLTE, passing id to a route not working

Question

I have installed Symfony + React application like AdminLTE. Everything works perfect, but I have run into a wall when I need to create dynamic route with id as a parameter. I have page with templates, each template has id, but I am getting route not found error. I guess I am missing some step. My code structure is like this:

// Default Controller

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

For sidebar, there is route.js file with routes that are generated like this:

const dashboardRoutes = [
  {
    path: "/documents",
    name: "Documents",
    rtlName: "لوحة القيادة",
    icon: Dashboard,
    component: Documents,
    layout: "/admin"
  },
  {
    path: "/importer",
    name: "Importer",
    rtlName: "لوحة القيادة",
    icon: Dashboard,
    component: Importer,
    layout: "/admin"
  }

}

And in my app.js I have generated main routes like this:

ReactDOM.render(
    <Router history={hist}>
        <Switch>
            <Route path="/" component={Admin} />
            <Route path="/admin" component={Admin} />
        </Switch>
    </Router>,
    document.getElementById("root")
);

When you click on the Documents link, you have a list of templates with specific id: (template 1, template 2...) like this:

        <CardFooter chart>
            <Link className={"nav-link"} to={`/admin/template/${data.template.id}`}> Template {data.template.id} </Link>
            <div className={classes.stats}>
                <AccessTime /> updated 4 minutes ago
            </div>
        </CardFooter>

I need that link to open a new component TemplateLayout to display the details about specific template. So I tried to add in app.js main routes code like this:

<Route exact path="/admin/template/:id" component={TemplateLayout} />

But it is rendering sidebar with blank page without errors.( http://localhost/admin/template/1 ). And this is the content of TemplateLayout file:

export default function TemplateLayout() {
    const classes = useStyles();
    console.log('tesla');
    return (
        <div>Test</div>
    );
}

Also, when I refresh http://localhost/admin/template/1 I get symfony route not found error. I cannot find what am I missing, any clue is welcome. Thank you.

Answer 1

First you need change Symfony route to

/**
 * @Route("/admin/template/{reactRouting}", name="home", defaults={"reactRouting": null})
 */

then in App.js change your Route to exact

ReactDOM.render(
    <Router history={hist}>
        <Switch>
            <Route path="/" exact component={Admin} />
            <Route path="/admin"  exact component={Admin} />
        </Switch>
    </Router>,
    document.getElementById("root")
);