Почему Reactjs не загружает содержимое компонента? - PullRequest
Новая
       42

Почему Reactjs не загружает содержимое компонента?

0 голосов
/ 03 февраля 2020

Я работаю над reactjs интерфейсом и в моем приложении. js У меня есть следующий код:

image

У меня также есть домашний компонент со следующим кодом: 

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import '../App.css';
import {BrowserRouter as Router } from 'react-router-dom';
import Navbar from './Navbar.component';
import Chart from './Chart.component';

class Home extends Component {
render() {
    return(
        <Router>
            <Navbar />
            <Chart />
        </Router>
    )
   }
}
export default Home;

Вот мой компонент navbar:

image

Теперь я хочу сделать, когда я нажимаю ССЫЛКУ на панели навигации (services Or Home), я хочу, чтобы компонент этого маршрута был отображается, но проблема, с которой я столкнулся в ссылке на браузер, показывает localhost: 3000 / Services, но содержимое компонента Home по-прежнему отображается так, как будто никогда не было навигации по новой странице.

Вот мой компонент служб: 

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import '../App.css';
import {BrowserRouter as Router } from 'react-router-dom';
import Navbar from './Navbar.component';

class Services extends Component {
  constructor(props){
      super(props);
  }
  render() {
      return(
        <Router>
            <Navbar />
        </Router>
     )
  }
}
export default Services;

Вот некоторые изображения:

1-е изображение предназначено для Домашней страницы до нажатия на ссылку: 2-е изображение для страницы служб после нажатия на ссылку: (нет содержимого службы)

enter image description here

After the Link is clicked

1 Ответ

1 голос
/ 03 февраля 2020

Вам нужно переместить Navbar в основное приложение. js и не использовать Router внутри маршрутизатора (т. Е. Страницы «Домой» и «Услуги») 

function App() {
 const key = Date.now();
 return (
  <Router>
    <Navbar />
    <Switch>
    <Route key={key} exact path="/">
      <Index />
    </Route>
      <Route key={key} exact path="/Login">
        <Login />
      </Route>
      <Route key={key} exact path="/Register">
        <Register />
      </Route>
      <Route key={key} exact path="/Home">
        <Home />
      </Route>
      <Route key={key} exact path="/Services">
        <Services />
      </Route>
    </Switch>
  </Router>
  );
  }
 export default App;


class Home extends Component {
render() {
    return(<Chart />)
   }
}
export default Home;


class Services extends Component {
render() {
    return(<ServciesContent />)
   }
}
export default Home;
...