Почему мой React Router возвращает пустые страницы?

Я использую последнюю версию приложения create-response-app. Я просмотрел все учебные пособия и пробовал несколько веб-сайтов с разными учебными пособиями, но не получаю ошибок.

Я пытаюсь вернуть страницы в своем приложении. Я сделал как функциональные компоненты, так и компоненты на основе классов, но не смотрел. Я попробовал обернуть взамен, но он не отображается. Все приложение работает, но содержимое страниц не отображается :(

About.js и Home.js похожи на это:

import React from 'react';

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

export default About;

Nav.js достаточно прост:

import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
import './css/Nav.css';

const Nav = () => (
    <ul>
        <li>
            <NavLink
                activeClassName = "active"
                to = "/">Home</NavLink>
        </li>
        <li>
            <NavLink
                activeClassName = "active"
                to = "/about">Admin</NavLink>
        </li>
    </ul>
);

export default Nav;

И, наконец, index.js

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import {
      BrowserRouter as Router,
      Route,
      Switch
    } from "react-router-dom";
    import registerServiceWorker from './misc';

    // COMPONENTS
    import Nav from './nav/Nav';

    // PAGE COMPONENTS
    import Home from './pages/Home';
    import About from './pages/About';
    import Page404 from './pages/404';

    // CSS
    import './css/Index.css';

    // CONSTRUCT
    class SmartApartmentApp extends Component {
      render() {
        return (
          <Router>
            <div className = "App">
                <Nav />
                <Switch>
                  <Route exact path = "/" Component = {Home} />
                  <Route path = "/about" Component = {About} />
                  <Route component = {Page404} />
                </Switch>
                <Footer />
            </div>
          </Router>
        );
      }
    }

    // EXECUTE
    export default SmartApartmentApp;
    ReactDOM.render(<SmartApartmentApp />, document.getElementById('root'));
    registerServiceWorker()

;

Я думаю, что вам нужно добавить точную опору к вашему домашнему маршруту, например: <Route exact path = "/" Component = {Home} />

Dusan Jovanov 08.04.2018 16:28

использовать компонент вместо компонента

Igor Stetsiura 08.04.2018 16:35

@IgorStecyura большое вам спасибо. Пожалуйста, напишите ответ, чтобы я мог отметить его правильным;)

TheBlackBenzKid 08.04.2018 16:38

@TheBlackBenKid создан :)

Igor Stetsiura 08.04.2018 21:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
101
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

эта проблема из-за использования неправильного имени реквизита!

в теге Route используйте имя свойства component вместо Component

Например

<Route path = "/about" Component = {About} />

должно быть:

<Route path = "/about" component = {About} />
Ответ принят как подходящий

Используйте свойство составная часть вместо Составная часть.

Другие вопросы по теме