时间戳

首页 > 解决方案 > React-router-dom 不渲染任何组件

reactjs - React-router-dom 不渲染任何组件

问题描述

我在遵循其路线后未呈现组件时遇到了一些问题。我使用创建反应应用程序。

我的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>

标签： reactjsreact-router

解决方案

你需要为你的家庭和测试组件包括进口！

 //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>
      )}
    />

希望这可以帮助！:)

推荐阅读