How to make friends react-router-dom with symfony backend?

Question

symfony

there is a REACT code like this

import React from 'react'
import ReactDOM from 'react-dom'
import createClass from 'create-react-class'

import {BrowserRouter as Router ,Route ,Link ,browserHistory ,Switch} from 'react-router-dom'

// Pages
const Home = () => (
    <div>
        <h1>Welcome to  Home page !</h1>
    </div>
);

const News = () => (
  <div>
      <h1>this page News !</h1>
  </div>
);





// config Route 
const Main = () => (
    <main>
        <Switch>
            <Route exact path='/' component={Home}/>
            <Route path='/news' component={News}/>
        </Switch>
    </main>
);

const Header = () => (
    <header>
        <nav>
            <ul>
                <li><Link to='/'>Home</Link></li>
                <li><Link to='/news'>News</Link></li>
            </ul>
        </nav>
    </header>
);




// render
const App = () => (
    <div>
        <Header />
        <Main />
    </div>
);
ReactDOM.render((
    <Router>
        <App />
    </Router>
), document.getElementById('root'));

and Route SYMFONY

class TController extends Controller
{
    /**
     * @Route("/", name="home")
     */
    public function home()
    {
        return $this->render('content/home.html.twig', [
            'controller_name' => 'TController',
        ]);
        
    }
  /**
   * @Route("/news", name="news")
   */
  public function news()
  {
    return $this->render('content/news.html.twig', [
    'controller_name' => 'TController',
    ]);
  }
}

how to make it so that when you click on the links, it would not be the render component of react,
but the transition to another page but without reloading?

Answer 1

You need to use an API approach. Forget templates. Your backend only responds with json to your requests (get/post/put/delete)
Routing moves entirely to the client.
similar questions:
Explain in simple terms how React communicates with a backend like Java or PHP?
What to use on the backend for SPA applications?