При выполнении маршрутизации с помощью React Router не отображается контент самой страницы?

Question

[Framed15]

import React, {Component} from 'react'
import {
    Route,
    NavLink,
    HashRouter
} from 'react-router-dom'
import Home from './Home'
import Stuff from './Stuff'
import Contact from './Contact'


class Main extends Component {
    render() {
        return(
            <HashRouter>
                <div>
                    <h1>Простое SPA приложение</h1>
                    <ul className="header">
                        <li><NavLink to="/">Home</NavLink></li>
                        <li><NavLink to="/stuff">Product</NavLink></li>
                        <li><NavLink to="/contact">Contact</NavLink></li>
                    </ul>
                    <div className="content">
                        <Route exact path="/" element={<Home/>}/>
                        <Route exact path="/stuff" element={<Stuff/>}/>
                        <Route exact path="/contact" element={<Contact/>}/>
                    </div>
                </div>
            </HashRouter>
        )
    }
}
export default Main

import React, {Component} from 'react'

class Home extends Component {
    render() {
        return(
            <div>
                <h1>Hello</h1>
                <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum</p>
                <p>Это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
            </div>
        )
    }
}
export default Home

import React, {Component} from 'react'

class Stuff extends Component {
    render() {
        return (
            <div>
                <h1>Product</h1>
                <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum</p>
                <ol>
                    <li>Nulla pulvar</li>
                    <li>Nulla silicon</li>
                    <li>Nulla valley</li>
                    <li>Nulla driver</li>
                    <li>Nulla ferand</li>
                </ol>
            </div>
        )
    }
}

export default Stuff

import React, {Component} from 'react'

class Contact extends Component {
    render() {
        return (
            <div>
                <h1>Quastions</h1>
                <p>Send your quastions on the <a href="http://forum.kirupa.com"></a></p>
            </div>
        )
    }
}
export default Contact

Answer 1

[Enzear1]

Лучше используйте
import {
Routes,
Route,
BrowserRouter
} from 'react-router-dom'
А также функциональные компоненты
Ваш роутер это - BrowserRouter , в котором есть пути в тэге Routes как childs
В Routes вы создаете Route с пропсом path = "url" и в качестве child передаёте компонент страницы

App.jsx

import Home from './Home'
import Stuff from './Stuff'
import Contact from './Contact'

function App() {
  return(
    <div className="App">
        <BrowserRouter >
          <Routes>
             <Route exact path="/" element={<Home/>}/>
             <Route exact path="/stuff" element={<Stuff/>}/>
             <Route exact path="/contact" element={<Contact/>}/>
          </Routes>
        </BrowserRouter >
    </div>