Простой компонент React не рендерится после маршрутизации

Question

Я новичок в React и учусь прокладывать маршрут. Моя страница меняет URL-адреса, но представление превращается в пустую страницу. Моя страница индекса работает нормально. У меня нет ошибок консоли.

В маршрутизаторе. js

import React from "react";
import {
  BrowserRouter,
  Route,
  Switch,
} from "react-router-dom";
import App from './App'
import SinglePriceGrid from './component/SinglePriceGrid'

function Router() {
    return (
       <BrowserRouter>
            <Switch>
                <Route exact path="/" component={App} />
                <Route path="/single-page-grid" component={SinglePriceGrid} />
            </Switch>
       </BrowserRouter>
    )
}
export default Router

В SinglePriceGrid. js

import React from 'react';
import '../css/SinglePriceGrid.css'

class SinglePriceGrid extends React.Component {
    render() {
        return (
            <div className="SinglePriceGrid">
                <h1>Hello Single Price Grid!</h1>
            </div>
        );
    }
}
export default SinglePriceGrid;

edit: добавлен импорт Я использовал

edit: прочитал Switch, но это не решило проблему

Answer 1

Мне очень жаль, но ошибка действительно унизительна. Мой путь неверен. Я использовал «страницу» вместо «цена» для конечной точки.

Answer 2

сохранить Маршруты внутри Коммутатор . Попробуйте это

import React from "react";
import {
  BrowserRouter,
  Route,
  Switch,
} from "react-router-dom";
import App from './App'
import SinglePriceGrid from './component/SinglePriceGrid'

function Router() {
    return (
       <BrowserRouter>
            <Switch>
                <Route exact path="/" component={App} />
                <Route path="/single-page-grid" component={SinglePriceGrid} />
            </Switch>
       </BrowserRouter>
    )
}
export default Router