React Router URL Change but Not Component

Question

React Router change the URL but the component is not rendered I have already looked for answer but none of those example is worked Current React Router & React Router DOM version is 5.0.0 It's still plain create-react-app

I've tried to use Switch tag

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

const Index = () => {
  return <h2>Home</h2>;
};

const About = () => {
  return <h2>About</h2>;
};

const Users = () => {
  return <h2>Users</h2>;
};

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <header className="App-header">
            <li>
              <Link to="/">
                <h1>Home</h1>
              </Link>
            </li>
            <li>
              <Link to="/about">
                <h1>About</h1>
              </Link>
            </li>
            <li>
              <Link to="/users">
                <h1>Users</h1>
              </Link>
            </li>
          </header>
          <hr />
          <Route exact path="/" Component={Index} />
          <Route path="/about" Component={About} />
          <Route path="/users" Component={Users} />
        </div>
      </Router>
    );
  }
}

export default App;

It wont render the component

Marc Sloth Eastman · Accepted Answer · 2019-03-25 14:57:25Z

4

Try setting the 'component' attribute with lowercase c

answered Mar 25, 2019 at 14:57

Marc Sloth Eastman

8131 gold badge12 silver badges23 bronze badges

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

1 Comment

Marc Sloth Eastman Over a year ago

Also in case you run into this problem later, you can also send in props to the component by making it a function like this: component = {() => <Index user = {this.state.loggedIn}/>}

lala · Accepted Answer · 2019-03-25 15:00:11Z

2

I think it's a simple mistake. You capitalized the attribute word component in your Routes.

answered Mar 25, 2019 at 15:00

lala

1691 silver badge10 bronze badges

Collectives™ on Stack Overflow

React Router URL Change but Not Component

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related