CODEWITHSUNDEEP
javascriptreactjslaravelreact-router
Nayeem Hyder Riddhi
Nayeem Hyder Riddhi

Reputation: 621

Why page only loading with React Router?

I have set Link and Route path with my header.js file. But with the laravel and react app, when i run npm run dev , it runs successfully. After that, when i run localhost:8000, the page only loading not showing any content. when i remove the 

<Route exact path ="/" component={Index} />
<Route exact path ="/about" component={About} />

from script, it runs successfully, but with above code, it's only loading the page.

Header.js

import React, { Component } from 'react';

import{ BrowserRouter as Router, Route, Link} from 'react-router-dom';
import Index from './Index';
import About from './about';

export default class header extends Component {
    render() {
        return (
            <Router>
            <div>
                <Link to ="/">Home</Link>
                <Link to ="/about">About Us</Link>

                <Route exact path ="/" component={Index} />
                <Route exact path ="/about" component={About} />


            </div>
            </Router>
        );
    }
}

Index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header';
import Footer from './footer';

export default class Index extends Component {
    render() {
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <Header />
                        <div className="card">
                            <h1>This is home page</h1>
                        </div>
                        <Footer />
                    </div>
                </div>
            </div>
        );
    }
}

if (document.getElementById('app')) {
    ReactDOM.render(<Index />, document.getElementById('app'));
}

Welcome.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">
        <link rel="stylesheet" href="css/app.css" />

        <title>Laravel</title>


    </head>
    <body>

<div id="app">

<h1>Hello... This is example</h1>

</div>

<script src="js/app.js"></script>
    </body>
</html>

Upvotes: 0

Views: 228

Answers (2)

A.K.47
A.K.47

Reputation: 237

If my understanding is correct then I guess you can't call Index.js from Index.js. What I mean to say is that you are trying to render the Index.js infintely.

Index.js is your root component. It has <Header/> which calls Index.js when the route matches the path /. Then it again calls Index.jswhich has <Header/> and so on.

What you can do instead is define a new Home component and create a new index.js to save yourself from the Infinite loop.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header';
import Footer from './footer';

export default class Home extends Component {
    render() {
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <Header />
                        <div className="card">
                            <h1>This is home page</h1>
                        </div>
                        <Footer />
                    </div>
                </div>
            </div>
        );
    }
}

if (document.getElementById('app')) {
    ReactDOM.render(<Home />, document.getElementById('app'));
}

Upvotes: 1

Errorname
Errorname

Reputation: 2471

You have an infinite recursive loop:

  1. Index renders the component Header.
  2. Header renders the component <Route exact path ="/" component={Index} />
  3. This Route renders Index when you are on /

<Route/> works by rendering the component prop when you are on the path prop.

Upvotes: 0

Related Questions