React Router only rendering one route

Question

I am new to React and react-router-dom. I have spent a couple hours now and I'm just hitting dead ends.

I'm using create-react-app and bulma for css. My dependencies:

"dependencies": {
  "bulma": "^0.7.1",
  "font-awesome": "^4.7.0",
  "node-sass-chokidar": "^1.3.3",
  "react": "^16.5.2",
  "react-bulma-components": "^2.1.0",
  "react-dom": "^16.5.2",
  "react-fontawesome": "^1.6.1",
  "react-router-dom": "4.3.1",
  "react-scripts": "2.0.4"

},

I've looked at all the related questions on stackoverflow, create-react-app documentation and searched their open issues section in their repo, googled every possible keyword. I'm at a loss.

My router will only render one route (Homeroute).

How do I get this to show '/create' route as well?

I've tried:

combinations of 'exact' and 'strict' attributes
wrapped everything after <BrowserRouter> or <HashRouter> with a <div>
tried both (un)wrapping <Route> with <Switch>

tried both BrowserRouter and HashRouter

import React, { Component } from "react";
import { Switch, Route, NavLink, BrowserRouter, HashRouter } from "react-router-dom";

const Home = () => {
    return (<h2>This is Home</h2>);
}
const Create = () => {
    return (<h2>This is Create page</h2>);
}

class App extends Component {
  render() {
    return (
      <HashRouter>
        <div>
          <Navigation />
          <div className="section">
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/create" exact Component={Create} />
            </Switch>
          </div>
          <Footer />
        </div>
      </HashRouter>
    );
  }
}
export default App;

URL: http://localhost:3000/#/

Result: "This is Home"

Expect: "This is Home"

URL: http://localhost:3000/#/create

URL: http://localhost:3000/#/create/

Result: nothing

Expect: "This is Create page"

Nguyen You Nguyen You · Accepted Answer · 2018-10-08T16:42:22

It's a typo. Notice the letter "C", it's supposed to be lower-case.

Make a change, from

<Route path="/create" exact Component={Create} />

to

<Route path="/create" exact component={Create} />

This is the demo: https://codesandbox.io/s/oq0rov0r4q

React Router only rendering one route

1 Answers