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.

What does "not seem to work" mean? Are there errors in the javascript console? — Andy Ray
– Andy Ray, Commented Aug 13, 2018 at 16:02
@AndyRay no there are no errors in the console. It is just not rendering the components. I get a blank page for / route and 404 for others — yugantar
– yugantar, Commented Aug 13, 2018 at 16:03
Yes, I can render just <Home /> component as well. No router nothing. render( <Home />, document.getElementById('container') ); works fine. — yugantar
– yugantar, Commented Aug 13, 2018 at 16:17
I've updated my answer. You have a typo there. It works perfectly fine for me. — devserkan
– devserkan, Commented Aug 13, 2018 at 16:22

devserkan · Accepted Answer · 2018-08-13 16:31:52Z

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

edited Aug 13, 2018 at 16:31

answered Aug 13, 2018 at 16:06

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

yugantar Over a year ago

Did not make any difference. I am able to get the Home path using the Try 2 file, but the Car Component. It is not even going inside the Component because there is nothing on the console even though I am logging stuff

devserkan Over a year ago

It made a difference which is you fixed a serious problem here. Let's dig your situation a little bit.

yugantar Over a year ago

Yeah, that's true. So what else can I check or do here?

yugantar Over a year ago

Hey, Thanks for your help and taking time out to write the code as well. I am somehow unable to run it also. It is taking ages to load the page only, still not loaded. I don't know what the issue is now. Unable to figure it out. If I find something, I'll definitely post it here.

yugantar Over a year ago

Hey. I tried this method. If I am doing this with your code, my browser is just not rendering. It is entering the component because I log in the constructor, but not rendering. When I put the Browser Router inside ReactDOM.render() it loads but only the Home component. /car is still giving a 404. I don't know what has happened.

|

Ronnie · Accepted Answer · 2018-08-13 16:40:17Z

0

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.

edited Aug 13, 2018 at 16:40

answered Aug 13, 2018 at 16:21

Ronnie

664 bronze badges

8 Comments

devserkan Over a year ago

You are right but there is also a Router component and it can be used with a custom history. It seems that problem is not that.

yugantar Over a year ago

I believe that is just an alias of BrowserRouter and I have already tried with BrowserRouter. And I have already tried what you mentioned above. Still no success.

Ronnie Over a year ago

I haven't found any documentation where { Router } is a valid import. the training kit has NativeRouter, MemoryRouter, and BroswerRouter, but nothing called Router to import. Perhaps the combination of both issues (invalid import and invalid case on component) could be the problem? I'll keep looking for anything else.

devserkan Over a year ago

@Ronnie, here it is reacttraining.com/react-router/web/api/Router

Ronnie Over a year ago

I have edited my answer above with another observation as well.

|

Collectives™ on Stack Overflow

Reactjs router not rendering any component

2 Answers 2

7 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related