简单React组件在路由后未呈现

Question

我是React的初学者，正在学习如何路由。我的页面更改了URL，但是视图变成了空白页面。我的索引页面工作正常。我没有任何控制台错误。

在Router.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>
            <div>
                <Route exact path="/" component={App} />
                <Route path="/single-page-grid" component={SinglePriceGrid} />
            </div>
       </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;

编辑：添加了我使用的进口

Answer 1

保留Switch内的Routes。试试这个

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