We Keep Coding

Why do I run into a blank page whenever I use react router , no matter what the version or use? [duplicate]

This question already has answers here:
React App goes blank after importing React-Router-Dom
(3 answers)
Closed 6 months ago.
I have tried many versions of RouterDOM and all I get when I use it is a blank page. This is just one example which I included BrowserReact in index.js. Still a blank page.
Can someone please help?
import logo from "./logo.svg";
import "./App.css";
import About from "./About";
import Home from "./Home";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={Home}>
This is in home
</Route>
</Routes>
</div>
);
}
export default App

Have you tried wrapping your component in tags?
The React Router documentation says you should use your component as JSX.
Like so:
<Routes>
<Route path="/" element={<Home/>} />
</Routes>

Uncaught TypeError: (0 , _reactRouterDom.useNavigate) is not a function

I have been seeing this error from today while creating a new app. I knew there were few changes with the react-router-dom new version and so have installed the older version.
"react-router-dom": "^5.2.0"
Not sure what is wrong.
Code of the App component
import { Container } from 'react-bootstrap';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import LoginScreen from './screens/LoginScreen'
const App = () => {
return(
<Router>
<Header />
<main className='py-3'>
<Container>
<Route path='/' component={LoginScreen} />
</Container>
</main>
<Footer />
</Router>
)
Can anyone please help me with this? Please let me know if any other details have to be added.

From the migration guide upgrading/v5#use-usenavigate-instead-of-usehistory, useNavigate hook is added for react-router v6.
Please check if there is any component that uses this hook. For react-router v5, you should use useHistory() to get the history object and perform the navigation.

React app not loading; whitescreen with no errors

Hoping someone can help me as I am at my wits end trying to figure out why this isn't loading. The site compiles with no errors but then just hangs loading and whitescreen; nothing in the DOM either to point out what is wrong.
Here is the source code (https://github.com/Asutherland8219/react-portfolio)
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />
, document.getElementById('root')
);
App.js
import React from 'react'
import './App.css';
import Navbar from './components/Navbar/Navbar';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import Home from './pages/Home';
import About from './pages/About';
import Portfolio from './pages/Portfolio';
import Contact from './pages/Contact';
function App() {
return (
<Router>
<Navbar />
<Switch>
<Route path='/' exact component= {Home}/>
<Route path='/about' component= {About}/>
<Route path='/portfolio' component= {Portfolio}/>
<Route path='/contact' component= {Contact}/>
</Switch>
</Router>
);
}
export default App;

There is an error in your Button component.
<Button
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
onClick={onclick}
type={type}
>
{children}
</Button>
You are rendering Button in Button component.

Line 5 of your Navbar file says
import { Button } from '../Button/Button.css';
I find this weird, and this error may be the reason behind this error

function App() {
return (
<>
<Header/>
<Routes>
<Route path={HOMEPAGE_URL} element={<App/>}/>
..........
</Routes>
</>
);
}
In my case I used App as a component for the element, this will work like a recursive function and eventually kill the memory with a poup message.
I had this kind of error for the first time, where the website is loading all the time without any errors. Maybe this answer will help someone with the same problem.

"You should not use <Link> outside a <Router>" Issue in Nested Routes

I've seen a similar question, but I unfortunately still have a bug in my code that I cannot seem to solve :(
My react-router-dom version is 5.2.0, and my react version 17.0.2.
I'm in the process of building a more complex React app, but I'm also able to replicate the bug with the simple code below. I've basically stripped everything out of the application except a <Test /> component.
Here's my App.js file, where I'm employing React-Router and have a single route for '/test'. At that route, I'm rendering my <Test /> component, then also using React-Router's <Link /> component. This works perfectly fine! Code below for both my App.js and Test.js files is below.
App.js:
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Test from './components/Test';
const App = () => (
<Router>
<Switch>
<Route exact path='/test'>
<Test />
<Link to='/' className='text-white'>
Go back home
</Link>
</Route>
</Switch>
</Router>
);
export default App;
Test.js
import React from 'react';
const Test = () => {
return (
<>
<h1 className='text-white'>Hello, world</h1>
</>
);
};
export default Test;
My bug occurs when I try to bring Link from react-router-dom into my <Test /> component. For example, I'm trying to do this:
Test.js
import React from 'react';
import { Link } from 'react-router-dom';
const Test = () => {
return (
<>
<h1 className='text-white'>Hello, world</h1>
<Link to='/' className='text-white'>
Go back home
</Link>
</>
);
};
export default Test;
But whenever I visit /test (i.e. http://localhost:3000/test), my application breaks and I see "Error: Invariant failed: You should not use Link outside a Router." Screenshot below:
I thought I had found an answer here, but I don't understand what it means to import or export from my bundle.
Any and all help is greatly appreciated! This has been a huge roadblock in my application as I'm trying to use React-Router's <Link /> component inside of other components rendered within the <Switch />.

Try to put this in the Route prop render:
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Test from './components/Test';
const App = () => (
<Router>
<Switch>
<Route
exact
path="/test"
render={() => ( // look at this
<>
<Test />
<Link to="/" className="text-white">
Go back home
</Link>
</>
)}
/>
</Switch>
</Router>
);
export default App;

I was able to fix the bug by just deleting my node_modules directory and then re-installing all of the required packages with npm install! The nested <Link /> component now works as expected.

React Router v4 Multiple Dynamic Routes

I'm new to React Router so if this has been asked before maybe someone could point me in the right direction! Basically I have a WordPress install that I'm pulling in my websites data from through the API.
I've created custom routes to query my pages and my posts by slug.
Using react router I was able to create a template called Page.js which changes dynamically using the code below.
However, now I'm trying to do the same exact thing with the blog posts but the app isn't using Blog.js its still defaulting back to Page.js
here's my App.js code...
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from './pages/Home';
import Page from './pages/Page';
import Blog from './pages/Blog';
import Header from './components/Header';
import Footer from './components/Footer';
class App extends React.Component {
render() {
return (
<Router>
<div>
<Header/>
<Route exact path="/" component={Home} />
<Route path="/:slug" component={Page} />
<Route path="/blog/:slug" component={Blog} />
<Footer/>
</div>
</Router>
);
}
}
export default App;
More Details:
Page.js works by checking const { slug } = this.props.match.params; and then querying WordPress using that slug to pull in the data it needs. In componentDidUpdate i'm checking prevProps to see if the slug matches the previous slug, if not it fetching the new data.
This works great and I was hoping to do the same in the Blog.js as well.
However, if this isn't the best approach please advise another method.

Two things:
Use element: This will allow only one route to be used, no composing. (See this documentation)
Check the order of path statements: Use defined paths before :param, this avoids considering /blog/:slug as a /:slug parameter.
`
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
class App extends React.Component {
render() {
return (
<Router>
<div>
<Header/>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/blog/:slug" component={Blog} />
<Route path="/:slug" component={Page} />
</Switch>
<Footer/>
</div>
</Router>
);
}
}

I think you're pretty close to the recommended implementation, just a few small tweaks should get you there.
First,
In your App.js file you're actually handling routing, without using the <Switch> component provided by React Router, replacing the <div> and </div> tags in your App.js file with <Switch> and </Switch> respectively should get this working for you. See below...
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; //make sure you import it also!
import Home from './pages/Home';
import Page from './pages/Page';
import Blog from './pages/Blog';
import Header from './components/Header';
import Footer from './components/Footer';
class App extends React.Component {
render() {
return (
<Router>
<Switch> //Add this in
<Header />
<Route exact path="/" component={Home} />
<Route path="/blog/:slug" component={Blog} />
<Route path="/:slug" component={Page} />
<Footer />
</Switch> //Add this in
</Router>
);
}
}
export default App;
I would recommend going further though!
To make these components more understandable, you should refactor routing functionality into a routes.js file, and top-level App component logic/structure into the App.js file. See below...
In App.js:
This file is where you should handle your base application structure and logic. For example this file is where you'll import your <Header>, your <Footer>, and where the Route component will render.
import * as React from 'react'
import Header from './../Header/Header.jsx'
import Footer from './../Footer/Footer.jsx'
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
// Handle your top-level application state here
}
}
// define your top-level application functions here
render() {
return (
<div>
<Header />
<main>
{this.props.children} //This where the Route components will render
</main>
<Footer />
</div>
)
}
}
export default App
In Routes.js:
This file is where you should import your App component, and then handle the routing statements.
import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import App from './components/App'
import Home from './pages/Home'
import Page from './pages/Page'
import Blog from './pages/Blog'
/* construct routes */
export default () => {
return (
<Router>
<App>
<Switch>
<Route path='/' exact component={Home} />
<Route path='/blog/:slug' component={Blog} />
<Route path='/:slug' component={Page} />
</Switch>
</App>
</Router>
)
}
If you structure your application this way, your routing logic and top-level application logic are separate, and in the end your files will be less cluttered as both Route files and top-level App files can get fairly dense.
Hope this helps! Let me know if I can explain anything further.