React Router в Laravel

1. В RoutePath вам нужно импортировать Switch из 'react-router-dom' сначала.
2. Тогда вы не должны рендерить в Example, иначе вы должны рендерить в RoutePath
3. Вам нужно перенаправить приложение JS на RoutePath в вашем app.js.

app.js

require('./homeComponents/RoutePath');

RoutePath.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter, Switch } from "react-router-dom";
import CreatePost from '../components/CreatePost';
import Example from '../components/Example';

export default class RoutePath extends Component{
    render(){
        return(
            <BrowserRouter>
                    <Switch>
                        <Route exact path='/' component = {Example}/>
                        <Route path='/add-post' component = {CreatePost}/>
                        <Route path='/edit' component = {Edit}/>
                    </Switch>
            </BrowserRouter>
        )
    }
}
ReactDOM.render(
    <RoutePath />
    , document.getElementById('homepage')
);

Пример.js

import React, { Component } from 'react';
import axios from 'axios';
import {Link} from "react-router-dom";
import CreatePost from './CreatePost';
import RoutePath from '../routes/RoutePath';

postRow(p){
        return (
            <tr key = {p.id}>
                <td>{p.title}</td>
                <td>{p.description}</td>
                <td><Link to='/edit'></Link></td>
                <td><Link to='/delete'></Link></td>
            </tr>
        )
    }

    render() {
        const posts = this.state.posts.map(post => this.postRow(post));
        return (
                <div>
                    <table border = "1">
                        <thead>
                        <tr>
                            <th>Title</th>
                            <th>Description</th>
                            <th></th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        { posts }
                        </tbody>
                    </table>
                    <div>
                        <Link to='/add-post'>Add</Link>
                    </div>
                </div>

        );
    }
}

Итак, в основном поток здесь:

1. Веб-пакет пытается скомпилировать app.js в /public/js по умолчанию.
2. Для app.js требуется RoutePath, который содержит все ваши данные маршрутизации.
3. RoutePath пытался отобразить весь ваш компонент, который у вас есть в корне ('/'), и он отобразил Example
4. Компонент был преобразован в 'homepage' id в вашем лезвии.

Это работает для меня... Мое единственное представление для моего одностраничного приложения — home.blade.php, и я использую BrowserRouter в своем App.js

Route::get('/', function () {
    return view('home');
});

Route::get('/{route}',function(){
    return view('home');
});

Это позволит вам перейти на http://локальный/ и получить домашнюю страницу приложения или http://localhost/о нас и получить маршрут «о нас».

Это лучший метод, чем использование HashRouter, который выглядел бы немного уродливее: http://localhost/#/о нас

Чтобы добавить к тому, что предложил @manley13. Вы также можете сделать это одним вызовом get:

Route::get('/{route?}',function(){
    return view('home');
});

? делает route необязательным.