Ссылки меню ReactJS и Laravel, показывающие компонент только в заголовке

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я работаю над приложением Laravel и ReactJS, в то время как я связываю страницы с помощью reactjs, компоненты загружаются только в заголовок. Но я хочу показать внутри основного раздела bootstrap.

Код, который я использую:

             <Router>
        <div className="page-header page-header--style2 header-sticky">
        <div className="page-header-top">
        <div className="container">
        <div className="logo">
        <a href="index.html"><img src="public/theme/images/logo.png" alt="" /></a>
        </div>
        <div className="page-header-menu">
        <div className="container">
        <ul className="menu">


        <li><Link to="/proclean/test">About Us2</Link></li>
        <li><Link to="/proclean/services">Services</Link></li>
        <li><Link to="/proclean/calculator">Cleaning Calculator</Link></li>
        <li><Link to="/proclean/booking">Service Booking</Link></li>


        <Route exact  path='/proclean/test' component={Test}></Route>
        <Route exact  path='/proclean/services' component={Services}></Route>
        <Route exact  path='/proclean/calculator' component={Calc.Calc}></Route>
        <Route exact  path='/proclean/booking' component={Booking.Booking}></Route>


        </ul>
        </div>
        </div>

        </div>
        </div>

        </div>
        </Router>
  

введите описание изображения здесь

И мой основной index.js является

                 import React, { Component } from 'react';
            import ReactDOM from 'react-dom';
            import Header from './Header';
            import Home from './HomePage/Home';
            import Footer from './Footer';
            export default class Index extends Component {
                render() {
                    return (

                        <div>
                            <Header />
                            <Home />
                            <Footer />
                        </div>
                    );
                }
            }

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

ИТАК, я просто хочу загрузить все содержимое в мой контейнер div вместо заголовка.

С уважением, Ritu

Комментарии:

1. показывать в качестве вашего заголовка, если это возможно

2. Пожалуйста, покажите свой полный код. Откуда взялся первый блок кода?