Я использую последнюю версию приложения 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()
;
использовать компонент вместо компонента
@IgorStecyura большое вам спасибо. Пожалуйста, напишите ответ, чтобы я мог отметить его правильным;)
@TheBlackBenKid создан :)



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


эта проблема из-за использования неправильного имени реквизита!
в теге Route используйте имя свойства component вместо Component
Например
<Route path = "/about" Component = {About} />
должно быть:
<Route path = "/about" component = {About} />
Используйте свойство составная часть вместо Составная часть.
Я думаю, что вам нужно добавить точную опору к вашему домашнему маршруту, например:
<Route exact path = "/" Component = {Home} />