React Router 未呈现正确的组件

Question

I am a beginner in React and trying to understand routing. I have created a learning project and want to render three different components each with a different path. However, all the paths result in the display of the App component.

I've tried finding solutions on multiple sources, but not able to figure out the issue! Please have a look. Thanks in advance.

Root.jsx

import React, { Component } from 'react';
import { Router } from 'react-router';
import { Redirect, Route, Switch } from 'react-router-dom';

import ScreensList from './List';
import ScreensWeather from './Weather';
import App from '../App';

const ScreensRoot = () => (
  <Router>
    <Switch>
        <Route exact path='/' component={App}/>
        <Route path="/list" component={ScreensList} />
        <Route path="/weather" component={ScreensWeather} />
    </Switch>
  </Router>
);

export default ScreensRoot;

App.js

import React, {Component} from 'react';
import './App.css';

class App extends React.Component {
   render(){
      return (
         <div>
            Hello from App!
         </div>
      )
   }
}   

export default App;

List.jsx

import React from 'react';
import List from '../components/List';

const ScreensList = () => (
    <div>
        <List/>
    </div>
);

export default ScreensList;

List.jsx

import React from 'react';

const List = (
    <div>Hello from List Component!</div>
);

export default List;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './screens/Root';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

Answer 1

1.Insted of

import { Router } from 'react-router';

use

import { BrowserRouter as Router } from "react-router-dom";

2.change

const List =  (
  <div>Hello from List Component!</div>
);

to

const List = () => (
  <div>Hello from List Component!</div>
);

3. As others mentioned

ReactDOM.render(<ScreensRoot />, rootElement);

Temporary codesandbox

Answer 2

As far as I can see, you've defined a ScreensRoot component but you're not using anywhere. Assuming you want that to be the actual root of your project, then in your index.js you must use it instead of App :

ReactDOM.render(<ScreensRoot/>, document.getElementById('root'));

(Note that you'll need to import ScreensRoot in your index.js in order for this to work).