We Keep Coding

ReactJs not rendering anything on page

I've been working with the react router dom and I keep seeing a blank white page on my screen.
App.js:
import React from 'react';
import HelloWorld from './HelloWorld';
import { HashRouter as Router, Route } from 'react-router-dom';
import Home from './Home';
function App() {
return (
<Router>
<Home />
<Route path="/notes" exact element={HelloWorld} />
</Router>
);
}
export default App;
Home.js:
import React from 'react';
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<Link to="/testHome" style={{ color: 'blue', fontSize: '20px' }}>
Go to Notes
</Link>
</div>
);
}
export default Home;
HelloWorld.js:
import React from 'react';
function MyComponent() {
return (
<div>
<h1>Hello world</h1>
</div>
);
}
export default MyComponent;
Index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
When I simply display the components in app.js, I can clearly see the hello world element on the screen, the problem is when I use react router. When I use react router I just see a blank white page. Can anyone help me solve the issue?

There are a couple issues:
The Route component isn't being rendered by a Routes (or other Route component in the case of nested routes).
The element prop takes a React.ReactNode prop value, a.k.a. JSX.
To resolve import the Routes component and wrap the Route component and render the HelloWorld component as JSX.
import React from 'react';
import HelloWorld from './HelloWorld';
import {
HashRouter as Router,
Routes, // <-- import Routes
Route
} from 'react-router-dom';
import Home from './Home';
function App() {
return (
<Router>
<Home />
<Routes> // <-- wrap rendered routes
<Route
path="/notes"
element={<HelloWorld />} // <-- render as JSX
/>
</Routes>
</Router>
);
}

I'm facing this error in client side in React,js

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.querySelector('#root'));
App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Join from './components/Join';
import Chat from './components/Chat';
const App = () => (
<Routes>
<Route path='/' exact component={Join} />
<Route path='/chat' component={Chat} />
</Routes>
);
export default App;
It thows error like "Error: useRoutes() may be used only in the context of a component."
Here is the ERROR:
"

You have to wrap your app in the BrowserRouter component in order to be able to use routing
So the code in index.js will be as follows
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(<BrowserRouter> <App /> </BrowserRouter>, document.querySelector('#root'));
You could instead wrap the app in App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Join from './components/Join';
import Chat from './components/Chat';
const App = () => (
<BrowserRouter>
<Routes>
<Route path='/' exact component={Join} />
<Route path='/chat' component={Chat} />
</Routes>
</BrowserRouter>
);
export default App;
but for cleaner code, do the first approach

Wrap your code inside <BrowserRouter> making sure it isn’t in the app itself but higher up in the tree.

I am having an issue with react router as my url is getting updated on clicking on it but the page is not getting rendered

I am having an issue with react router as my url is getting updated on clicking on it but the page is not getting rendered but when I reload it at that specific url then it renders the content whereas I want it to be rendered as soon as I click on the link
this is my App.js
import React from 'react';
import Nav from './Nav';
import { BrowserRouter as Router ,Switch, Route} from 'react-router-dom';
import About from './About'
function App() {
return (
<>
<Router>
<Nav/>
<Switch>
<Route exact path='/about' render={About} />
</Switch>
</Router>
</>
);
}
export default App;
This is my Nav.js
import React from "react";
import {BrowserRouter as Router , Link } from "react-router-dom";
import './App.css';
function Nav(){
return(
<Router>
<nav>
logo
<Link to="/about">
About
</Link>
<Link to='/shop'>
shop
</Link>
</nav>
</Router>
)
}
export default Nav
this is my About.js
import React from "react";
function About(){
return(
<div>
About Page
</div>
)
}
export default About

You should either wrap the App component with BrowserRouter or, wrap the App component with Router component that accepts a history prop.
Index.js
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>,document.getElementById("root"));
App.js
import React from 'react';
import Nav from './Nav';
import { BrowserRouter as Router ,Switch, Route} from 'react-router-dom';
import About from './About'
function App() {
return (
<>
<Nav/>
<Switch>
<Route exact path='/about'>
<About/>
</Route>
</Switch>
</>
);
}
export default App;
Nav.js
import React from "react";
import {BrowserRouter as Router , Link } from "react-router-dom";
import './App.css';
function Nav(){
return(
<nav>
logo
<Link to="/about">
About
</Link>
<Link to='/shop'>
shop
</Link>
</nav>
)
}
export default Nav
Since, Nav.js and other components using Routes are wrapped within the app component which is further wrapped within BrowserRouter in index.js, you don't need to include Router in each component having Route or Link components.

JSX element type 'Route' does not have any construct or call signatures - route problem

I have got error with Route "message": "JSX element type 'Route' does not have any construct or call signatures."
in Browser:
./src/app/layout/App.tsx
Attempted import error: 'react-router-dom' does not contain a default export (imported as 'Route').
Really I don`t know what is wrong.
import React from "react";
import NavBar from "../../features/nav/NavBar";
import Footer from "../../features/footer/Footer";
import Route, { BrowserRouter } from "react-router-dom";
import Dashboard from "../../features/dashboard/Dashboard";
import TestApiDashboard from "../../features/testApiDashboard/TestApiDashboard";
const App = () => {
return (
<div>
<div className="main">
<NavBar />
<Route path="/" component={Dashboard} />
<Route path="/testApiDashboard" component={TestApiDashboard} />
<Route path="/" component={Dashboard} />
</div>
<Footer />
</div>
);
};
export default App;
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import './app/layout/styles.css';
import App from './app/layout/App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();

You need to import differently as the following:
import {
BrowserRouter,
Route,
} from "react-router-dom";
Instead of your code snippet:
import Route, { BrowserRouter } from "react-router-dom";
You can read further at <Route />. I hope this helps!

this.props.children isnt working with react-router

i am trying to make a navigaton on my website by react-router and typescript. but its not working and instead of Home page i get an empty page
Thats my app.tsx file
// app.tsx
import * as React from 'react';
import '../App.css';
class App extends React.Component<any,any> {
public render() {
return (
<div>
{this.props.children}
</div>
);
}
}
export default App;
index.tsx
// index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import {AppRouter} from './router';
ReactDOM.render(
<AppRouter/>,
document.getElementById('root') as HTMLElement
);
registerServiceWorker();
router.tsx
import * as React from 'react';
import { Route,Router } from 'react-router';
import App from './components/App';
import HomePage from './components/home/HomePage';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
export const AppRouter = () => {
return (
<Router history={history}>
<Route path="/" component={App} >
<Route path="/" exact={true} component={HomePage} />
</Route>
</Router>
);
}
i dont really dont know what to say. i cant find any possible info about this. If u know better way to make navigation with typescript, react and redux i am open for ideas. thx

In the App component, you are doing {this.props.children}. So you should not pass that component to any route.
You need to add all the routes as a child of that component through which you will get the children in your props.
Also, for switching between routes, you should bind all the routes in the 'Switch' imported from react-router.
So, your router.tsx file should look like:
import * as React from 'react';
import { Route, Router, Switch } from 'react-router';
import App from './components/App';
import OtherComponent from './components/OtherComponent';
import HomePage from './components/home/HomePage';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
export const AppRouter = () => {
return (
<App>
<Router history={history}>
<Switch>
<Route exact={true} component={HomePage} />
<Route path="/other" component={OtherComponent} />
</Switch>
</Router>
</App>
);
}
By this, you will get the 'HomePage' component at route '/' and OtherComponent at route '/other'.