React-router-dom 不渲染任何组件答案

【问题标题】：React-router-dom not rendering any componentsReact-router-dom 不渲染任何组件
【发布时间】：2018-10-25 19:41:38
【问题描述】：

我遇到了组件在遵循其路线后未呈现的问题。我使用 create-react-app。

我的 index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import * as serviceWorker from "./serviceWorker";

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

serviceWorker.unregister();

和App.js

import React, { Component } from "react";
import "./App.css";
import { Route, Switch } from "react-router-dom";
import test from "./Component/test1/test";

const Home = () => <h1>Heloo</h1>;

class App extends Component {
  render() {
    return (
      <div className="App">
        <Switch>
          <Route path="/Log" render={() => <h1>Log</h1>} />
          <Route path="/About" Component={Home} />
          <Route path="/" Component={test} />
        </Switch>
      </div>
    );
  }
}

export default App;

当我运行项目时，/Log 呈现良好，但 /About 和 / 显示此 html：

<div id="root">
  <div class="App">
  </div>
</div>

【问题讨论】：

Route 的正确属性是component，而不是Component
@omri_saadon omg，谢谢帮助
@HughFreeman 见下文...我还对其进行了一些清理以遵循惯例...实际组件应以大写开头...您还需要“/”路线上的确切道具它应该是第一位的......另外，最大的错误是路由组件是小写......

标签： reactjs react-router

【解决方案1】：

您需要为您的家庭和测试组件包括导入！

 //import Home from './Component/test1/home' (or whatever the path is for home);
 //import test from './Component/test1/test' (or whatever the path is for test);

此外，如果您希望您的主页成为用户首先看到的内容，您可能希望将其包装在它自己的开关中，然后提供一个渲染以允许找到其他路径。

    <Switch>
      <Route exact path="/" component={home} />
    </Switch>

    <Route
      path="/(.+)"
      render={() => (
        <div>
            <Switch>
              <Route path="/home" component={Home} />
              <Route path="/test" component={test} />
            </Switch>
        </div>
      )}
    />

希望这会有所帮助！ :)

【讨论】：

【解决方案2】：

改成这样：

import React, { Component } from 'react';
import './App.css';
import { Route, Switch } from 'react-router-dom';
import Test from './components/Test';

const Home = () => <h1>Heloo</h1>;

class App extends Component {
  render() {
    return (
      <div className="App">
        <Switch>
          <Route exact path="/" component={Test} />
          <Route path="/log" render={() => <h1>Log</h1>} />
          <Route path="/about" component={Home} />
        </Switch>
      </div>
    );
  }
}

export default App;

【讨论】：