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:

I created RoutePath.js to create Routes only but i dont know how to import them into Example.js
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>
        )
    }
}

You're trying to render <Example /> directly in Example.js you should let it get rendered from RoutePath instead since that's wrapped in a Router — apokryfos
– apokryfos, Commented Mar 1, 2019 at 10:51

Symphony0084 · Accepted Answer · 2019-05-31 20:11:06Z

6

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

edited May 31, 2019 at 20:11

answered May 31, 2019 at 19:35

Symphony0084

1,43521 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryuujo · Accepted Answer · 2019-03-01 12:14:25Z

0

In RoutePath, you need to import Switch from 'react-router-dom' at first.
Then you shouldn't render in Example, otherwise you should render on RoutePath
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:

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

edited Mar 1, 2019 at 12:14

answered Mar 1, 2019 at 11:56

Ryuujo

6232 gold badges9 silver badges28 bronze badges

3 Comments

Huy Hoàngg Over a year ago

I see. Thank you so much!

Huy Hoàngg Over a year ago

Can I ask one more question? When I add a post and click 'Add' button, I want it redirect automatically to Homepage or any page that I want to, so how can I do it? I searched in the Internet and found 'browserHistory' from 'react-router' but it seems like it does not exist because of new version of React

apokryfos Over a year ago

If you render a <Redirect/> object when you need to redirect it should work.

myselfmiqdad · Accepted Answer · 2019-07-24 21:43:11Z

0

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.

answered Jul 24, 2019 at 21:43

myselfmiqdad

2,6143 gold badges21 silver badges36 bronze badges

Collectives™ on Stack Overflow

React Router in Laravel

3 Answers 3

Comments

app.js

RoutePath.js

Example.js

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

app.js

RoutePath.js

Example.js

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related