Question

我已经用header.js文件设置了链接和路由路径。但是，使用laravel和react应用程序，当我运行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>

Answer 1

如果我的理解是正确的，那么我猜你不能从Index.js致电Index.js。我的意思是说您正在尝试无限渲染Index.js。

Index.js是您的根组件。它具有<Header/>，当路由与Index.js匹配时会调用path /。然后，它再次调用具有Index.js的{{1}}，依此类推。

您可以做的是定义一个新的Home组件并创建一个新的<Header/>，以使自己脱离index.js。

Infinite loop

Answer 2

您有一个无限的递归循环：

索引呈现组件标头。
页眉呈现组件<Route exact path ="/" component={Index} />
当您在/上时，此路线将显示索引

<Route/>通过在您使用component道具时渲染path道具来工作。

为什么页面仅使用React Router加载？

2 个答案: