Проект маршрутизации с React и Symfony 3.4

Question

Я пытаюсь построить проект, основанный на Symfony 3.4 и React впереди.

Мои большие сомнения касаются маршрутизации и запросов. Сейчас я загружаю React в app / Resources / views / index. html .twig в div с root id. Это позволяет мне сделать мою домашнюю страницу сделанной в React.

У меня есть другая страница с простой формой для регистрации пользователя в моей БД. У меня есть пакет для пользователей в моем symfony и UsersController с методом registerAction. Маршрут к этому действию /users/register.

Форма имеет параметр действия с этим маршрутом, и когда я нажимаю на кнопку "Отправить", браузер выводит мне index.html.twig из UsersBundle вместо возврата, который у меня есть на моем registerAction.

    public function registerAction(Request $request) {

        $userName = $request->request->get("userName"); 
        $email = $request->request->get("email"); 
        $password = $request->request->get("password"); 

        $doctrineManager = $this->getDoctrine()->getManager();

        $user = new User();
        $user->setUserName($userName);
        $user->setEmail($email);
        $user->setPassword($password);

        $doctrineManager->persist($user);

        $doctrineManager->flush();

        return new Response('Saved new user with id: '.$user->getUserId());

    }

И это моя форма React:

import React from 'react';

class Second extends React.Component {
  render() {
    return (
        <div>
          <p>Welcome to the Second</p>
          <form method="POST" action="https://manuel.empty.devilgipsy.com/users-management/web/app_dev.php/users/register">
              <input type="text" name="userName" placeholder="Username" />          
              <input type="text" name="email" placeholder="Email" />          
              <input type="text" name="password" placeholder="Password" />          
            <button type="submit">Enviar</button>
          </form>
        </div>
    );
  }
}
export default Second;

Это мое приложение. js, где я отображаю в div id root.

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter,
  Switch,
  Route,
  NavLink
} from "react-router-dom";

import Home from "./components/Home";
import Second from "./components/Second";
// require("../css/style.css");


class App extends React.Component {
    render() {
        return(
            <BrowserRouter>
                <ul>
                    <NavLink to="/users-management/web/app_dev.php">Home</NavLink>
                    <NavLink to="/users-management/web/app_dev.php/second">Second</NavLink>
                </ul>
                <Switch>
                    <Route exact path="/users-management/web/app_dev.php/" component={Home} />
                    <Route path="/users-management/web/app_dev.php/second" component={Second} />
                </Switch>
            </BrowserRouter>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

Очевидно, я полагаю, что обработка запросов также является неправильной, но это другой вопрос.

Как визуализировать различные компоненты и представления, вызывающие различные действия сзади?