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:

• Adding <h1>Hello</h1> within <BrowserRouter> to see if it would render prior to the Routes -- it did not.
• Varying syntaxes (component vs element keyword, different paths)
• Leaving index.js as default and doing routing in App.js
• Leaving App.js as default and doing routing within the render function in index.js

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.

CodePudding user response：

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