Question

我在遵循组件路线后无法渲染组件时遇到了一些麻烦。我使用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>

Answer 1

您需要包括房屋和测试组件的进口！

String

此外，如果您希望您的主页成为用户看到的第一件事，则可能需要将其包装在自己的开关中，然后提供允许查找其他路径的渲染器。

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

希望这会有所帮助！：）

Answer 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;

React-router-dom不呈现任何组件

2 个答案: