Reactjs router not rendering any component

Question

webpack.config.js

module.exports = {
    entry: {
        app: __dirname + '/src/index.js'
    },
    output: {
      path: __dirname + '/public',
      filename: 'bundle.js'
    },
    mode: 'development',
    devServer: {
        inline: true,
        port: 9999
     },
    module : {
      rules : [
        {
          test : /\.jsx?/,
          loader : 'babel-loader',
          query: {
            presets: ['es2015', 'react']
          }
        }
      ]
    }
  };

src/index.js -- Try 1

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route } from 'react-router-dom'
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

class Car extends Component {
    constructor(props){
        super(props);

        console.log('Inside Car Constructor');
    };
    redner(){
        return(<h1>Cars</h1>);
    }
}

class Home extends Component {
    constructor(props){
        super(props);

        console.log('Inside Constructor');
    };
    render(){
        return (
        <div>
            <h1>Hi</h1>
            <Router history={history}>
                <div>
                    <Route exact path="/" Component={Home} />
                    <Route path="/car" Component={Car} />
                </div>
            </Router>
        </div>
    );
    }
}

render(
    <Home/>,
    document.getElementById('container')
);

index.js -- Try 2

class Home extends Component {
    constructor(props){
        super(props);

        console.log('Inside Constructor');
    };
    render(){
        return (<h1>Hi</h1>);
    }
}

render(
    <Router history={history}>
        <Switch>
            <Route exact path="/" Component={Home} />
            <Route path="/car" Component={Car} />
        </Switch>
    </Router>,
    document.getElementById('container')
);

index.js -- Try 3

render(
    <Router history={history}>
        <Route exact path="/" Component={Home} />
        <Route path="/car" Component={Car} />
    </Router>,
    document.getElementById('container')
);

index.js -- Try 4

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Switch } from 'react-router-dom'
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

class Car extends Component {
    constructor(props){
        super(props);

        console.log("Inside Car constructor");
    };

    render(){
        return (<h1>Carrssss</h1>);
    }
}

class Home extends Component {
    constructor(props){
        super(props);

        console.log("Inside home constructor");
    };

    render(){
        return (<h1>Hi</h1>);
    }
}

render(
    <Router history={history}>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/car" component={Car} />
        </Switch>
    </Router>, 
    document.getElementById('container')
);

I have tried all of the above things, but the path does not seem to work. In the first try, / seems to work but not /car. In the second and third try, not even the / is working for me. How do I solve this error? and why is it caused?

I have tried using both the packages react-router and react-router-dom. Tried using BrowserRouter as well instead of Router, still can't figure our anything.

Answer 1

One thing that pops out to me is that you are grabbing a component called { Router }, when react-router-dom has a component called { BrowserRouter } that is often imported in this way

import { BrowserRouter as Router } from 'react-router-dom';

Also, you are passing a custom history prop to your Router. React-Router uses its history prop to determine where you are and what to render. Overriding this could be causing the issue. You can see for yourself using the React Dev Tools in your web browser. All Routed components and components wrapped with WithRouter will have a history prop passed down by React-Router.

Answer 2

It is not:

<Route exact path="/" Component={Home} />

it is

<Route exact path="/" component={Home} />

Notice the component part.

A second mistake is there is a typo in your first try. In Car component instead of render you are using redner.

Working code as it is:

import { BrowserRouter, Route } from "react-router-dom";

class Car extends React.Component {
  render() {
    return (<h1>Cars</h1>);
  }
}

class Home extends React.Component {
  render() {
    return (
      <div>
        <h1>Hi foo</h1>
        <BrowserRouter>
          <div>
            <Route exact path="/" component={Home} />
            <Route path="/car" component={Car} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

ReactDOM.render(
  <Home />,
  document.getElementById("container")
);