I don't understand why I am getting blank page even after changing Switch to Router, can anyone help to fix?
App.js:
import './App.css';
import React from 'react'
import Form from './Components/Form';
import Person from './Components/Person'
import 'bootstrap/dist/css/bootstrap.min.css';
import Headers from './Components/Header';
import {
BrowserRouter as Router,
Routes,
Route
} from "react-router-dom";
function App() {
return (
<Router>
<div>
<Headers></Headers>
Welcome to home
<Routes>
<Route path="/form" element={<Form />}>
</Route>
<Route path="/person" element={<Person />}>
</Route>
<Route path="/" element={<App />}>
</Route>
</Routes>
</div >
</Router>
)
}
export default App;
When I checked console log:
Uncaught Error: You cannot render a inside another .
You should never have more than one in your app.
You're nesting the router as you're rendering <Route path="/" element={<App />}>. That's why you're getting the error.
I suggest you create another component (e.g. Home) to render for the root path. Take a look at the documentation.
Related
I have been trying to find a solution for this.
Navbar, Home, Services, Contactus are different components that render fine when I don't user the Route method. They also render fine within the BrowserRouter tags. But when I try to place them within the Route tags, the whole screen goes blank
import Contactus from './Contactus';
import Navbar from './Navbar';
import Home from './Home';
import Services from './Services';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import React, { Component } from 'react';
function App() {
return (
<div className="App">
<h1>This is React Router</h1>
<Router>
<Navbar/>
<Route path="/home" Component={Home} exact />
<Route path="/services" Component={Services} exact />
<Route path="/contactus" Component={Contactus} exact />
</Router>
</div>
);
}
export default App;
What am I doing wrong?
I have managed to fix this. The library installed was react-router-dom v6 but the coding was done for earlier versions. Below are the changes I made and its now working.
Fixes -
All the <Route> lines need to be enclosed within a <Routes> block
For some reason, component is not being accepted as a parameter in the new version so essentially component={Home} is now replaced by element={<Home/>}
And of course, we now need to import Routes also from react-router-dom
import logo from './logo.svg';
import './App.css';
import Contactus from './Contactus';
import Navbar from './Navbar';
import Home from './Home';
import Services from './Services';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import React from 'react';
function App() {
return (
<div className="App">
<h1>This is React Router</h1>
<Router>
<Navbar/>
<Routes>
<Route path="/home" element={<Home/>} exact />
<Route path="/services" element={<Services/>} />
<Route path="/contactus" element={<Contactus/>} />
</Routes>
</Router>
</div>
);
}
export default App;
I am trying to implement a dynamic route from my app.js.
I have 2 pages. HomePage.js and ReportPageLayout.js.
When I try to navigate from HomePage to ReportPage, I am getting a status= cancelled.
Image of Network tab
When i refresh the page in the browser, the data is fetched and rendered.Image status=200 and component rendered on dom
Here is my app.js file
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Homepage from './pages/Homepage';
import ReportPage from './pages/ReportPageLayout';
export default function App() {
return (
<div className="App">
<Router>
<Switch>
<Route exact path="/" component={Homepage} />
<Route path="/:id" component={ReportPage} />
</Switch>
</Router>
</div>
);
}
Please help. Thank you in advance.
As far as I know (not that much), in router-dom v5 you should nest the target component and not as an argument
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Homepage from './pages/Homepage';
import ReportPage from './pages/ReportPageLayout';
export default function App() {
return (
<Fragment>
<Switch>
<Route exact path="/">
<Homepage/>
</Route>
<Route path="/:id">
<ReportPage/>
</Route>
</Switch>
</Fragment>
);
}
Furthermore, if you use suspense or importing data from, you should always create a fallback.
I had the same thing here
Delay in loading the array crushs the app
I am trying to render an ultra-simple webpage using react-routing-dom lib. Here is my app.js
import React from 'react';
import Nav from './nav.js';
import Shop from './shop.js';
import About from './about.js';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import './App.css';
function App() {
return (
<>
<Nav />
<Router>
<Route exact path='/' element={<About />} />
<Route exact path='/shop' element={<Shop />} />
</Router>
</>
);
}
export default App;
using this, I run npm start and expect that the <Nav /> and <About /> components render at http://localhost:3000. Instead, the screen is completely blank. There are no warnings, errors, etc.; it's a clean build. Not even the <Nav /> component that is outside the entire Router block is rendered!
The plot thickens: when I build and run the following, all three components render.
import React from 'react';
import Nav from './nav.js';
import Shop from './shop.js';
import About from './about.js';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import './App.css';
function App() {
return (
<>
<Nav />
<Router>
<About />
<Shop />
</Router>
</>
);
}
export default App;
From this, I think its safe to assume that <Route /> is the problem.
react-router-dom seems to change a lot in a relatively short amount of time, so there is a lot of outdated info. If someone could point me in the right direction, I would be very grateful indeed.
Only thing I see missing is the Routes component wrapping the Route components. You imported Routes but don't appear to have used it. All Route components must be rendered into a Routes component (or another Route if nesting). Without the Routes you should be seeing the error A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
<Router>
<Routes>
<Route exact path="/" element={<About />} />
<Route exact path="/shop" element={<Shop />} />
</Routes>
</Router>
Check if you have installed react-router-dom version 6. for version 6 you must wrap up all 'Route' inside a "Routes".
react route path is not working
it shows only product component in all URL
I Have instilled react-router-dom, and also import BrowserRouter as Router,
Switch,
Route,
Link
What is the problem? I can not figure it out.
import React from 'react';
import Navbar from './component/Navbar/Navbar';
import Product from './component/Product/Product';
import {BrowserRouter as Router,Switch,Route,Link} from "react-router-dom";
import UpComing from './component/UpComing/UpComing';
import NotFound from './component/NotFound/NotFound';
import OrderReview from './component/OrderReview/OrderReview';
function App() {
return (
<div className="App">
<Navbar></Navbar>
<Router>
<Switch>
<Route to="/product">
<Product></Product>
</Route>
<Route to="/OrderReview">
<OrderReview></OrderReview>
</Route>
<Route exact to="/">
<Product></Product>
</Route>
<Route to="*">
<NotFound></NotFound>
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
You should be using path instead of to on your routes. to is used for Link components. I've created a minimal representation of your code working on codesandbox
https://codesandbox.io/embed/react-router-playground-g0uzc?fontsize=14&hidenavigation=1&theme=dark
React-Router appears to be working in my app except for the fact that I am getting a blank page instead of my component, even though it is directed to the proper path.
I'm scanning the documentation but I can't resolve the issue on my own after looking it over and searching Google/this site.
I had tried...
Making it so that the router.js file just contained the routes only to get the same results. Specifying exact path as well when doing so.
Reinstalling react-router-dom into the component in case there was an error when it downloaded.
Removing the provider in case that was the issue
Placing the code in the router file directly in the App.js file between the provider component tags
These are the files involved.
Router.js
import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';
const Router = () => {
return (
<Switch>
<Redirect from='/' to='/landing' />
<Route path='/landing' component={LandingPage} />
<Route path='/citypage' component={CityPage} />
</Switch>
);
}
export default Router;
App.js
import React from "react";
import { BrowserRouter } from "react-router-dom";
import Router from "./services/Router";
import ChosenCityContextProvider from "./services/context/ChosenCityContext";
const App = () => {
return (
<BrowserRouter>
<ChosenCityContextProvider>
<Router />
</ChosenCityContextProvider>
</BrowserRouter>
);
};
export default App;
No error messages accompany the rendering of the site. Aside from the blank page, everything else appears to be working. In the React Dev tools, it states that the Router.Consumer has an object which is revealed to empty when expanded.
What is wrong with my code?
https://codesandbox.io/s/youthful-maxwell-rch1k?fontsize=14
Above is sandbox of code. I have the same issue here
I'm not certain why exactly this fixes the issue, but I've run into this on a work project so knew it worked.
If you add exact into the redirect element it forces the correct behavior.
import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';
const Router = () => {
return (
<Switch>
<Redirect exact from='/' to='/landing' />
<Route path='/landing' component={LandingPage} />
<Route path='/citypage' component={CityPage} />
</Switch>
);
}
export default Router;
I tried this and it worked. I'm not sure why before it didn't. If anyone has an explanation please let me know because I am trying to learn what I did wrong initially.
<Route render={() => <Redirect from='/' to='/landing' />} />
I added the above, so my router file looked like this.
import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';
const Router = () => {
return (
<Switch>
<Route path='/landing' component={LandingPage} />
<Route path='/citypage' component={CityPage} />
<Route render={() => <Redirect from='/' to='/landing' />} />
</Switch>
);
}
export default Router;
#DLowther has also showed me another solution
import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import Page from "./Page";
import Home from "./Home";
const Router = () => {
return (
<Switch>
<Redirect exact from="/" to="/home" />
<Route path="/home" component={Home} />
<Route path="/page" component={Page} />
</Switch>
);
};
export default Router;
I would like to credit this individual for answering my question