React-router-dom не рендерит никаких компонентов

Question

У меня проблемы с компонентом, который не рендерится после следования по маршруту.Я использую create-реакции-приложение.

Мой 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

Изменить на это:

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;

Answer 2

вам нужно включить импорт для вашего дома и тестовые компоненты!

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

Надеюсь, это поможет!:)