CODEWITHSUNDEEP
javascriptreactjsreact-routercreate-react-app
Saverio Terracciano
Saverio Terracciano

Reputation: 3915

React Router doesn't display component when route is matched (but render works)

I am trying to learn React and using Create-React-App to experiment.

Today I was trying to learn how to use React Router, but I couldn't make it work.

Here is my code: (App.js)

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom'

import { Navbar, Jumbotron, Button } from 'react-bootstrap';

class App extends Component {

  render() {
    const baseUrl = process.env.PUBLIC_URL;

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">React Star Wars Table Test</h1>
        </header>

        <Router>
          <div>
            <NavLink to={baseUrl + '/Foo'}>Foo</NavLink>  <NavLink to={'/Bar'}>Bar</NavLink>
            <hr />


            <Switch>
              <Route path="/" exact render={() => (<h1>HOME</h1>)} />

              <Route path={baseUrl + "/Foo"} exact Component={Foo} />
              <Route path='/Bar' exact Component={Bar} />
            </Switch>
          </div>
        </Router>
      </div>
    );
  }



}

class Foo extends Component {

  render() {
    return (
      <p>Foo!</p>
    );
  }
}

class Bar extends Component {
  retnder(){
    return (
        <h1>Bar!</h1>
    );
  }
}

export default App;

The issue is that the routes don't display the components when they match the URL (either clicking on the NavLinks or manually typing the URL).

The base ('/') route works and displays the HOME H1.

I know the routes are matching because if I try to use the render attribute for all the routes, it works.

Upvotes: 1

Views: 175

Answers (1)

Tholle
Tholle

Reputation: 112917

The prop of Route that takes a component is called component, not Component with a capital c.

<Route path='/Bar' exact component={Bar} />

Upvotes: 4

Related Questions