Develop Reference

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:
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.

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:
Create project: npx create-react-app bin
Change into the project directory: cd bin
Install project dependencies: npm i
Add react-router-dom to the project: npm i -s react-router-dom
Edit code & save
Run the project: npm start

Why can't I install react-dom#experimental?

I'd like to try out some of the new Concurrent Mode features in React 18. The official documentation, as well as several articles, claim that you just need to install react#experimental react-dom#experimental. I have done so but I am met with the following error:
Property 'unstable_createRoot' does not exist on type 'typeof import("C:/my-app/node_modules/#types/react-dom/index")'. TS2339
> 10 | ReactDOM.unstable_createRoot(document.getElementById("root")).render(<App />);
| ^
This is my trying to add this import to an existing project that is already working, not a new project from scratch
EDIT2: Here is my code:
import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";
ReactDOM.unstable_createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);

That's a Typescript error/warning. (If you are not using Typescript, it's your editor using it behind the scenes.)
Your #types/react package doesn't have the unreleased experimental function you're trying to use.
See the comments in https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/experimental.d.ts#L2 to see how to bring the experimental bits into scope.

How to add a React app to an existing website

I create a small React application using npx create-react-app my-app. I would like to add this React application to my existing website in a specific <div>.
My website:
<div id="reactApp"></div>
In React, I have index.js as
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
//document.getElementById('root')
document.getElementById('reactApp')
);
reportWebVitals();
Then, I build the application npm run build. It generates the following files (image below) in static folder. Do I need to add all these .css and .js files to my main website to make it work?

Convert your project my-app to a web component and then add it to the other react application (you can add it to any other web application).
More details on how to create web components can be found here
https://blog.bitsrc.io/web-component-why-you-should-stick-to-react-c56d879a30e1

Failed to compile: Cannot find file './containers/App/App' in './src'

I have been having a hard time pushing a React.js app to Heroku because I keep getting a failed to build message with the following amplifying information.
Heroku Build Console:
-----> Build
Running build
> veterinfo#0.1.0 build /tmp/build_2456efea678b82d24203cb2e2c7bcbd5
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/index.js
Cannot find file './containers/App/App' in './src'.
My index.js file:
import App from './containers/App/App'
import * as serviceWorker from './serviceWorker'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducers'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))
const router = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
)
File Structure:
src
-->containers
-->App
-->__snapshots__
-->App.js
-->App.scss
-->App.test.js
-->index.js
I have tried deleting node_modules and reinstalling them,
I have tried clearing the build cache in heroku,
I have tried specifying App.js in the relative path,
I have tried specifying the node version in the yml and package.json files,
The Build passes locally with npm run build,
I have tried just passing in each component into the router's position and I have found that all of the components work but all of the containers do not (could this be a redux issue somehow?)
I am about out of ideas :/

You can start by clearing the cache and see if there are any files that have been renamed.
This will cache the entire directory:
git rm -r --cached .
Also, you have to add, commit and push the changes:
git add .
git commit -am 'Removing cached files'

Rename containers to Containers and components to Components

You might have changed the casing of the file names after you have commited to git. You can fix it by calling git mv path/app.js path/App.js. This explicitly changes the file name in git.

The problem was fixed when I renamed the directory to Containers and the relative path to import App from './Containers/App/App'

Check .gitignore , may be your files are not being sent to remote repository

react-router-dom BrowserRouter not working after build

This is the first time I tried react.
I create a project using create-react-app, then for routing, I use React Router V4 for web react-router-dom.
This is my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
);
There's no problem when I start the server with npm start. But when I build the app with npm run build, putting it in my www folder in my Apache server and access it, I only get empty page with <!-- react-empty: 1 --> inside my root div.
<div id="root">
<!-- react-empty: 1 -->
</div>
I have tried looking for similar cases, but the answer always about adding historyApiFallback in webpack.config.js or gulp, which I can't find anywhere in the create-react-app template.
I have tried HashRouter, it's working fine, but there's /#/ in the url which is undesirable.
How can I get the BrowserRouter to work after I build the app?

Well, there was no problem at all. It worked, even if it was built using npm run build. My best guess is: you placed the files in the wrong folder.
When you build your code using npm run build, the static folder should be placed inside the MallApp folder. So your folder structure should be like this:
/var/www/mywebfolder/index.html
/var/www/mywebfolder/MallApp/static
Check your browser's console, I believe it contains errors. Failed to get the js and css files.