Reactjs screen is not rendering - javascript

I think that the problem is in the switch, in version of react-router-dom or in routes. Only when I created and applied the code in this class, the screen started don't render and stays white. I already changed the version of react-router-dom but I don't know what can be.
Below the code of routes.js:
//react-router-dom version: "^5.3.0"
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Home from './pages/Home';
import Header from './components/Header';
const Routes = () => {
return(
<BrowserRouter>
<Header/>
<Switch>
<Route exact path="/" component={Home}/>
</Switch>
</BrowserRouter>
)
}
export default Routes;

React Router v6 introduces some changes like.
Routes component that is kind of like Switch, but a lot more powerful one.
Route still exist but you don't pass a pointer to that component function or as a children component, Instead you pass the JSX element to the element prop &
exact doesn't exist anymore, now it's always looks for exact matches.
So, component={Home} would become element={<Home />}
Something like this
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
You can dive deep to this migration guide: https://reactrouter.com/docs/en/v6/upgrading/v5
hope that's help you

Related

Can't route pages in react-router-dom [duplicate]

This question already has an answer here:
Why I receive blank page? React
(1 answer)
Closed last month.
I want to using the BrowserRouter component from the react-router-dom library to handle client-side routing in React.Js
In this case, when the user navigates to the every URL of the website, these pages component will be rendered. But nothing shows up to the root directory or any path.
Here is the code of app.js
import React from "react";
import GlobalStyle from "./globalStyle.js";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
//Pages
import Home from "./Pages/Home";
import Pricing from "./Pages/PricingPage.js";
import Signup from "./Pages/SignupPage.js";
function App() {
return (
<Router>
<GlobalStyle />
Test
<Routes>
<Route exact path="/" component={Home} />
<Route path="/signup" component={Signup} />
<Route path="/pricing" component={Pricing} />
</Routes>
</Router>
);
}
export default App;
If you are using react-router-dom v6, the routes should be:
<Route exact path="/" element={<Home />} />
<Route path="/signup" element={<Signup />} />
<Route path="/pricing" element={<Pricing />} />
component is element, their values are in tags.

Redirect wrong behavior in react-router-dom

I'm using react-router-dom in my reactjs application, and I have this block at the end of my routes to redirect all the wrong paths to this one:
<Router>
<React.Suspense fallback={loading}>
<Switch>
//...all my routes...
//at the end of my routes I have this
<Route path="*">
<Redirect to="/dashboard" />
</Route>
</Switch>
</React.Suspense>
</Router>
If I add a random route like /nonexistentroute it redirects me to /dashboard but, If I'm in a specific route like /home and I click on the refresh button of chrome, I'm being redirected to the /dashboard when it should keep me in the same route.
How can I fix it?
You can use Navigate from latest version of react-router-dom to redirect to a different page.
import React, { Component } from 'react';
import Test_1 from './components/Test_1';
import Test_2 from './components/Test_2';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Navigate } from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<Routes>
<Route path='/' element={<Test_1 />} />
<Route path='/home' element={<Test_2 />} />
<Route path='*' element={<Navigate to='/' />} />
</Routes>
</Router>
);
}
}
export default App;
Try writing like this if you are using react-router-dom version 6
<Routes>
<Route path="/" element={<Homepage />} />
<Route path="*" element={<ErrorPage />} />
</Routes>
From your description it sounds like you are rendering several routes into a router without a Switch component. Routers inclusively match and render routes while the Switch exclusively matches and renders the first Route or Redirect component. In other words, a router will render all matches, redirects included, the Switch renders only the first.
Wrap your routes in a Switch and place the redirect last in the list so if no other route path was previously matched the Redirect will render.
<Switch>
... all other routes ...
<Redirect to="/dashboard" />
</Switch>
This OFC, all assumes you are still using react-router-dom v5 since you made no mention of any Redirect component import errors (Redirect was removed in RRDv6). If this isn't the case and you are actually using RRDv6 then please update your question to include a more complete code example.

React router v4 - Browser router not rendering parent component

Currently I'm trying to make it so that my parent router is activated each time. I'm not very sure of the terminology here.
<BrowserRouter>
<Switch>
<Route exact path='/browserRouterPath' component={loginComponent}/>
<HashRouter>
<Route path='/hashRouterPath' component={loginComponent2}/>
<Route path='/' component={loggedInComponent}/>
</HashRouter>
</Switch>
</BrowserRouter>
LoggedInComponent
<Switch>
<Route exact path='/' render={() => (
<Redirect to: {{pathname: '/finalComponent'> }}/>
)}> />
...
</Switch>
My current problem is that my components in the hashRouter are not being called.
When the loggedInComponent redirects it to the new path, the hashRouter is not called.
However, if I remove the hashRouter in the first block of code. The hashRouter is called without incident, but that breaks the CSS/styling of the components in the program.
Is there a way to render the parent component each time? Or is there a workaround that eliminates the hashRouter but keeps the CSS for me?

Route in react Application is not working as expected

I have been trying to change the route of react application with react-router-dom
<Switch>
<Route path="/id" component={Random}/>
<Route path="/" exact component={Products}/>
</Switch>
Inside the application when I am using /id in the URL it is rendering Products Component instead of Random Component
Inside index.js the code is:
ReactDOM.render(
<BrowserRouter><Products/></BrowserRouter>,document.getElementById("root")
);
You should be rendering your router. You are currently rendering the product component
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/id" component={Random}/>
<Route path="/" exact component={Products}/>
</Switch>
</BrowserRouter>,document.getElementById("root")
);
You should render the Switch component inside BrowserRouter tag.

Is it possible to use MemoryRouter nested in BrowserRouter in React?

I have been searching, and trying for a while now, however I couldn't find an answer if it is possible to use MemoryRouter for only specific routes while I use BrowserRouter in general. I wan t to navigate to a certain component but not change the url, tried it like so, but it changes the url but not rendering the component, the complete opposite what I wish.
<BrowserRouter>
<Switch>
<Route path="/login" component={Login} exact />
<Route path="/" component={MainPage} />
<MemoryRouter>
<Route
path='/somecomponent'
component={SomeComponent}
/>
</MemoryRouter>
</Switch>
</BrowserRouter>
Routes inside the MemoryRouter are relative to the MemoryRouter, not to your current location as displayed in the URL bar.
As far as it's concerned, the current route is "/", and it will only render components at <Route path="/">. If you were to add
<Route path="/">
<Redirect to="/somecomponent" />
</Route>
directly under MemoryRouter it should go to the path you're looking for, and render as intended.

Categories