react-router-dom只呈现第一条路由

Question

我刚开始学习react，遇到了一个问题，当我试图使用react-router-dom时，我遇到了一个问题，只有第一个组件被渲染为所有定义的路由

这是定义路由的主页。js

import React, { Component } from 'react';
import Categories from "./categories";
import Category from "./category";
import ListingItem from "./listing_item";
import { 
BrowserRouter as Router, 
Switch, 
Route, 
Redirect, 
Link 
} from 'react-router-dom';
export default class HomePage extends Component{
constructor(props){
super(props);
}
render() {
return (
<Router>
<Switch>
<Route exact path="" component={ListingItem}/>
<Route path="categories/" component={Categories}/>
<Route path="category/" component={Category}/>
</Switch>
</Router>
);
}}

我尝试了"类别"。和";categories"具有精确路径的组件，没有精确路径的组件，仍然只呈现第一个组件

组件如下:listing_item组件

import React, { Component } from 'react';
export default class ListingItem extends Component{
constructor(props){
super(props);
}
render() {
return <p>This is the Item Listing page</p>
}
}

类别

import React, { Component } from 'react';
export default class Category extends Component{
constructor(props){
super(props);
}
render() {
return <p>This is a single Category page</p>
}
}

和categories是相同的结构

这是App.js渲染主页

import React, {Component} from "react";
import { render } from "react-dom";
import HomePage from "./HomePage";

export default class App extends Component {
constructor(props){
super(props);
}

render() {
return(
<div>
<HomePage />
</div>
);
}
}
const AppDiv = document.getElementById("app");
render(<App />, AppDiv)

Answer 1

可能有语法问题。

export default class category extends Component

应该

export default class Category extends Component{

和

export default class listing_item extends Component

应该

export default class ListingItem extends Component