React-router-dom not rendering any components

Question

I am having some trouble with a component not rendering after following its route. I use create-react-app.

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

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

When I run project, /Log renders good, but /About and / shows this html:

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

Answer 1

you need to include the imports for your home and test components!

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

Also, if you want your homepage to be the first thing your user sees, you may want to wrap it in it's own switch and then provide a render that allows for other paths to be found.

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

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

Hope this helps! :)

Answer 2

Change to this:

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;