执行“npm start”命令后，代码为“COMPILED SUCCESSFULLY”并将我重定向到 web 浏览器。 但是没有任何 output

Question

App.js

import React, { Component } from 'react';

import Home from './Home';
import About from './About';

import './App.css';
import {Route} from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Route path="/"  component={Home}/>
        <Route path="/about"  component={About}/>
      </div>
    );
  }
}

export default App;

Home.js

import React, { Component } from 'react';

class Home extends Component {
 render(){
return(
    <div>
    <h1>Home </h1>
    
    
    </div>

)


 }
  }

export default Home;

About.js

import React, { Component } from 'react';

class About extends Component {
 render(){
return(
    <div>
    <h1>About</h1>
    
    
    </div>

)


 }
  }

export default About;

package.json

{
  "name": "demo-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.2",
    "react-router-native": "^6.0.2",
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Answer 1

you need to setup an router and an switch for your routes to work. docs

change your app.js to

import React, { Component } from 'react';

import Home from './Home';
import About from './About';

import './App.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
           <Switch>
               <Route path="/"  component={Home}/>
               <Route path="/about"  component={About}/>
           </Switch>
        </Router>
      </div>
    );
  }
}

export default App;