CODEWITHSUNDEEP
javascriptreactjscomponentsreact-routerrender
Debbie Yoo
Debbie Yoo

Reputation: 11

React Router Component not Rendering

I've been working with React Router and trying to route my App.js and Car.js components together. I wrote {this.props.children} in those two components but it still isn't working. There is no where on my local host page that shows any indication of the Car.js component when I deploy my app.

Here's my App.js:

import React, { Component } from 'react';
import Login from './Login.js';
import Search from './Search.js';
import Message from './Message.js';
import Car from './Car.js';
import {BrowserRouter, Route} from 'react-router-dom';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Login />
        <Search />
        <Message />
            <div>
                <BrowserRouter> 
                <Route path="/Car" component={Car}/>
                </BrowserRouter>
                {this.props.children}
            </div>
      </div>

    );
  }
}

Car.js:

// Car page example 
import React, { Component } from 'react';
import {Router, Route} from 'react-router';

class Car extends Component {
    render(){
        return(
            <div>
                <h1> Cars page </h1>
                {this.props.children}
            </div>
        );
    }
}

export default Car;

Upvotes: 1

Views: 1111

Answers (1)

Kyle Richardson
Kyle Richardson

Reputation: 5645

So you're going to want at least 2 routes unless /Cars is the only page in which case you don't need routing! :)

In this example the Home component will be displayed when your url is something like http:/www.exmaple.com/

The Cars component will be displayed when the url is http:/www.exmaple.com/Cars

const App = () => (
    <div>
        <Login />
        <Search />
        <Message />
        <div>
            <BrowserRouter>
                // you're going to want a default view
                <Route exact path="/" component={Home} />
                // this will be displayed when your url has /Car at the end of it
                <Route path="/Car" component={Car} />
            </BrowserRouter>
        </div>
    </div>
);

If you don't want to have to manually type in the urls to change the views... You will have to include a <Link /> or a <NavLink /> that points to the respective view.

Try <NavLink to="/Cars" /> and don't forget to add { ... NavLink ... } from "react-router-dom" as well.

You might want to have a look at react-router WEB documentation over at ReactTraining.com's react-router page. They're the people who created and maintain react-router. Good documentation as well!

Upvotes: 1

Related Questions