How to use Laravel routes over react router
Question
I integrated React in my laravel project. I started off using the react router but now I would like to switch back to Laravel routes.
Is it possible to inject my react components globally in my blade files just like Vue?
For setting up React routing I used following wildcard:
Route::view('/{path?}', 'layouts.app');
When I try to get back to normal laravel routing I get the following error
Error
Uncaught Error: Target container is not a DOM element.
My web.php
Route::get('/', 'PageController@index');
Controller
class PageController extends Controller
{
public function index()
{
return view('layouts.index');
}
}
Layouts.app file
<body>
<div class="main">
@section('content')
</div>
<script src="{{ asset('js/test.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
Index.blade
@extends('layouts.app')
@section('content')
<Call> </Call>
@endsection
React
App.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Header from './Header'
import Call from './Call'
import Recipient from './Recipient';
import Avatar from './Avatar';
import registerServiceWorker from '../registerServiceWorker';
class App extends Component {
render () {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route exact path='/' component={Call} />
<Route exact path='/rusthuis' component={Recipient} />
<Route exact path='/avatar' component={Avatar} />
</Switch>
</div>
</BrowserRouter>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
registerServiceWorker();
3 answers
solution1
1 2019-01-07 21:06:55
The target container is not a DOM element because in your HTML you don't have a div with the id of app .
You should change your html to this for layouts.app :
<body>
<div id="app" class="main">
@section('content')
</div>
<script src="{{ asset('js/test.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
solution2
1 2021-03-23 21:05:37
By default Laravel(6) already is utilizing id="app" so in your react index.blade.php, ie where you define your react entry point, use a different id name to prevent react App.js from overriding your normal Laravel files ie:
index.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- csrf token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- styles -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app-react"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
App.js
import React from "react";
import { BrowserRouter as Router, Switch, } from "react-router-dom";
import Home from "./Home";
function App() {
return (
<React.Fragment>
<Navbar />
<Switch>
<Route exact path="/" component={Home}></Route>
<Route component={Default}></Route>
</Switch>
</React.Fragment>
);
}
export default App;
if (document.getElementById("app-react")) {
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("app-react")
);
}
using the following route
Route::get('/{path?}',function(){
return view('app');
});
{path?} represent anything(word)
The first level URLs will affect the react but higher levels ie
Route::view('/user/links','bladefile')
Links in our case will be a legit Laravel route.
solution3
0 2020-08-28 09:38:22
put your
Route::view('/{path?}', 'layouts.app');
at end of web routes so that it will be loaded at last getting your all views
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.