CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
calccrusher17
calccrusher17

Reputation: 13

Simple React Routes not showing up

I am following a very simple tutorial on react routes, and for some reason, this code block does not render the component on the screen. Here is my code in App.js:

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route } from "react-router-dom";
import SigninPage from "./pages/signin";

function App() {
  return (
    <Router>
      <div>
        <Route path="/" component={SigninPage} exact />
      </div>
    </Router>
  );
}

export default App;

If I replace <Route path="/" component={SigninPage} exact /> with <SigninPage />, then the component shows up.

I have no warnings or errors, and my react-router-dom version is 6.0.0-beta.0. I have tried running npm start again and restarting my computer. I very much appreciate any help.

EDIT:

I figured it would be useful to include signin.js:

import React from "react";

const SigninPage = () => {
  return (
    <div>
      <h1>Signin</h1>
    </div>
  );
};

export default SigninPage;

Upvotes: 1

Views: 686

Answers (1)

vipulbhj
vipulbhj

Reputation: 710

The react-router-dom version seems incorrect here, the API has changed slightly in V6, so if you try the stable version, everything will work just fine.

You can change the version to either @latest which points to a stable version or install a specific version.

npm i packageName@versionNumber

npm uninstall react-router-dom
npm install react-router-dom@latest or npm install [email protected]

Upvotes: 1

Related Questions