React Router 没有渲染正确的组件答案

【问题标题】：React Router not rendering correct componentReact Router 没有渲染正确的组件
【发布时间】：2020-05-12 10:29:03
【问题描述】：

我是 React 的初学者，正在尝试理解路由。我创建了一个学习项目，并希望渲染三个不同的组件，每个组件都有不同的路径。但是，所有路径都会导致 App 组件的显示。

我已尝试从多个来源寻找解决方案，但无法找出问题所在！请看一看。提前致谢。

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();

【问题讨论】：

您没有在任何地方包含 Root.jsx。这是处理路由切换的地方。使用 ScreensRoot 切换应用程序。

标签： reactjs react-router react-component

【解决方案1】：

1.插入

import { Router } from 'react-router';

使用

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

2.改变

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

到

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

3. 正如其他人提到的

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

Temporary codesandbox

【讨论】：

【解决方案2】：

据我所知，您已经定义了一个 ScreensRoot 组件，但您没有在任何地方使用。假设您希望它成为项目的实际根目录，那么在您的 index.js 中，您必须使用它而不是 App：

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

（请注意，您需要在 index.js 中导入 ScreensRoot 才能使其正常工作）。

【讨论】：