Почему страница загружается только с React Router? - PullRequest
Новая
       14

Почему страница загружается только с React Router?

0 голосов
/ 20 мая 2019

Я установил Link и Route path с моим файлом header.js.Но с приложением laravel и реагировать, когда я запускаю npm run dev, оно запускается успешно.После этого, когда я запускаю localhost: 8000, загружается только страница, не показывая никакого контента.когда я удаляю 

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

из скрипта, он запускается успешно, но с приведенным выше кодом он загружает только страницу.

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>

Ответы [ 2 ]

1 голос
/ 20 мая 2019

Если мое понимание верно, то я думаю, что вы не можете позвонить Index.js с Index.js. Я хочу сказать, что вы пытаетесь отрисовать Index.js бесконечно.

Index.js - ваш корневой компонент. Он имеет <Header/>, который вызывает Index.js, когда маршрут соответствует path /. Затем он снова вызывает Index.js, который имеет <Header/> и т. Д.

Вместо этого вы можете определить новый домашний компонент и создать новый index.js, чтобы спасти себя от 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'));
}
0 голосов
/ 20 мая 2019

У вас бесконечный рекурсивный цикл:

  1. Индекс отображает заголовок компонента.
  2. Заголовок отображает компонент <Route exact path ="/" component={Index} />
  3. Этот маршрут отображает индекс, когда вы находитесь на /

<Route/> работает путем рендеринга опоры component, когда вы находитесь на опоре path.

...