React Router in Laravel

Question

I'm trying to build a Laravel project using ReactJS. I've done show the data on table. However, when I add some links like Create, Edit, Delete... , it occurred some errors:

- Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.
- Uncaught Error: You should not use `Link` outside a `Router`

So:

1. I created RoutePath.js to create Routes only but i dont know how to import them into Example.js
2. When add page, edit page...is clicked, it redirects to blank page, not below the homepage. However, It seems that the add page will be below the homepage

Im new so please help me. Thank you. Here's my code:

Example.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
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>

        );
    }
}
ReactDOM.render(
    <Example />
    , document.getElementById('homepage')
);

RoutePath.js

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

export default class RoutePath extends Component{
    render(){
        return(
            <BrowserRouter>
                    <div>
                        <Route exact path='/' component={Example}/>
                        <Route path='/add-post' component={CreatePost}/>
                        <Route path='/edit' component={Edit}/>
                    </div>
            </BrowserRouter>
        )
    }
}

Answer 1

To add on to what @manley13 suggested. You can also do it in one get call:

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

The ? makes the route optional.

Answer 2

This works for me... My single view for my Single-Page-App is home.blade.php and I am using BrowserRouter in my App.js

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

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

This will allow you to go to http://localhost/ and get the homepage of the app or http://localhost/about-us and get the 'about-us' route.

This is a better method than using HashRouter which would look a little uglier: http://localhost/#/about-us

Answer 3

1. In RoutePath, you need to import Switch from 'react-router-dom' at first.
2. Then you shouldn't render in Example, otherwise you should render on RoutePath
3. You need to redirect the JS app to RoutePath in your 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')
);

Example.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>

        );
    }
}

So basically the flow is here:

1. The webpack tries to compile the app.js to /public/js in default.
2. The app.js requires RoutePath that contains all of your routing stuff.
3. The RoutePath was trying to render all of your component you have in root ('/'), and it render Example
4. The component has been rendered to 'homepage' id in your blade.