Как подружить react-router-dom с бекенедом symfony?

Question

[coffeehoock]

есть такой код REACT

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'));

и 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',
	  ]);
	}
}

как сделать что бы при клике по ссылкам происходил не render component react
а переход именно на другую страницу но без перезагрузки ?

Answer 1

[Максим]

Вам нужно использовать API-подход. Забудьте про шаблоны. Ваш бэкэнд только отвечает json-ом на ваши запросы (get/post/put/delete)

Роутинг целиком переезжает на клиент.

подобные вопросы:
Объясните простым языком, как происходит общение React с бэкэндом например Java или PHP?
Что использовать на backend для SPA приложений?