CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
BtChevallier
BtChevallier

Reputation: 63

react-router-dom blank screen when routing

I'm poking around with react routing and can't get it to work. I've stripped down to an empty new project just to test the fundamentals, and still can't get it running. I am using vscode and generated my react project using npx. This is my current code:

App.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';

import './App.css';
import Landing from './components/Landing'

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Landing />} />
      </Routes>
    </BrowserRouter>
  );
}

index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

My landing.js is just a text entry, which I have confirmed does work if there is no BrowserRouter wrapper.

I've tried:

All of the resources I've found online for react-router-dom@6 points that this (or some iteration of what I've done) is correct, yet I get a blank screen no matter what I do once I wrap within <BrowserRouter>.

Any help would be invaluable at this point; I don't think I'll be able to continue on my own.

Upvotes: 2

Views: 1361

Answers (1)

Drew Reese
Drew Reese

Reputation: 203471

After creating the project with npx create-react-app bin the next step should be to cd into the bin directory and run npm install to install dependencies, then npm i -s react-router-dom to install react-router-dom and save it to your package.json file, then run npm start to run the app. I think the node version installed should be fine.

Steps:

  1. Create project: npx create-react-app bin
  2. Change into the project directory: cd bin
  3. Install project dependencies: npm i
  4. Add react-router-dom to the project: npm i -s react-router-dom
  5. Edit code & save
  6. Run the project: npm start

Upvotes: 1

Related Questions