Before importing react-router it was working fine. Now it build successfully but shows a blank page. Here is my code:
App.js
//import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={Home} />
<Route path="/Pending" element={Pending} />
</Routes>
</BrowserRouter>
);
}
Home.js
import React, { Component } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import NavBar from '../components/NavBar';
function Home(){
return(
<div>
<div>
<NavBar/>
</div>
<h1>HI</h1>
</div>
);
}
export default Home;
Issue
The Route component API changed in react-router-dom#6. All routed content is now rendered on a single element prop as a ReactNode, a.k.a. JSX, not a reference to a React component.
Solution
Render the routed components as JSX, i.e. <Home /> instead of Home.
import { BrowserRouter, Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Pending" element={<Pending />} />
</Routes>
</BrowserRouter>
);
}
You should specify which version of react-router-dom you are using. So I'm just gonna assume, you are using the latest v6.
In your App.js file, you have to make the following changes in order to work:
import { Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<Routes>
<Route index path="/" element={<Home />}/>
<Route path="pending" element={<Pending />} />
</Routes>
);
}
For more info, please visit the official documentation here!
import './App.css';
import { BrowserRouter as Router , Route, Routes } from "react-router-dom";
import Header from './Components/Header';
import Footer from './Components/Footer';
import Home from './Components/Home';
import About from './Components/About';
function App() {
return (
<>
<Router>
<Header/>
<Routes>
<Route path="/" element={ <Home/> } />
<Route path="/About" element={ <About/> } />
</Routes>
<Footer/>
</Router>
</>
);
}
export default App;
Related
Here is my App.js code
import './App.css';
import Home from './Pages/Home';
import About from './Pages/About';
import Contact from './Pages/Contact';
import {BrowserRouter,Routes,Route ,Link} from 'react-router-dom';
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home/>}/>
<Route Path="/About" element={<About/>}/>
<Route Path="/Contact" element={<Contact/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
and Here is my About page
import React from 'react';
import {Link} from 'react-router-dom';
function About() {
return (
<div>
<h1>This is About</h1>
<Link to="About">Go to About</Link>
</div>
)
}
export default About
React Route is not working.I installed react router Dom already.please help me to fix
Not navigation working
Can you change this
<Link to="About">Go to About</Link>
to
<Link to="/About">Go to About</Link>
I have added / before the "About" in to.
I am new to react and have been struggling with the router for a crud application, attaching the app.js file and the console errors. CodeSandbox
import './App.css';
import AddUser from "./components/AddUser";
import Navbar from "./components/navbar";
import CrudApp from "./components/CrudApp";
import AllUsers from "./components/AllUsers";
import{ Routes, Route} from "react-router-dom";
import {BrowserRouter as Router} from "react-router-dom";
function App() {
return (
<div>
<Router>
<Navbar />
<Routes>
<Route path='/add'>
<AddUser/>
</Route>
<Route path='/all'>
<AllUsers />
</Route>
<Route path='/'>
<CrudApp />
</Route>
</Routes>
</Router>
</div>
);
}
export default App;
This is the error image
Before importing react-router it was working fine. Now it build successfully but shows a blank page. Here is my code:
App.js
//import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={Home} />
<Route path="/Pending" element={Pending} />
</Routes>
</BrowserRouter>
);
}
Home.js
import React, { Component } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import NavBar from '../components/NavBar';
function Home(){
return(
<div>
<div>
<NavBar/>
</div>
<h1>HI</h1>
</div>
);
}
export default Home;
Issue
The Route component API changed in react-router-dom#6. All routed content is now rendered on a single element prop as a ReactNode, a.k.a. JSX, not a reference to a React component.
Solution
Render the routed components as JSX, i.e. <Home /> instead of Home.
import { BrowserRouter, Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Pending" element={<Pending />} />
</Routes>
</BrowserRouter>
);
}
You should specify which version of react-router-dom you are using. So I'm just gonna assume, you are using the latest v6.
In your App.js file, you have to make the following changes in order to work:
import { Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';
export default function App() {
return (
<Routes>
<Route index path="/" element={<Home />}/>
<Route path="pending" element={<Pending />} />
</Routes>
);
}
For more info, please visit the official documentation here!
import './App.css';
import { BrowserRouter as Router , Route, Routes } from "react-router-dom";
import Header from './Components/Header';
import Footer from './Components/Footer';
import Home from './Components/Home';
import About from './Components/About';
function App() {
return (
<>
<Router>
<Header/>
<Routes>
<Route path="/" element={ <Home/> } />
<Route path="/About" element={ <About/> } />
</Routes>
<Footer/>
</Router>
</>
);
}
export default App;
I'm creating a Google Clone. This is my current code for that. I read that I needed to changed the syntax from 'Switch' to 'Routes', given the update for react-router. I did just that and my "This is the search page" is not displaying inside of the browser.
import React from "react";
import './App.css';
import Home from './pages/Home';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
function App() {
return (
// BEM
<div className="app">
<Router>
<Routes>
<Route path="/search">
<h1>This is the search page</h1>
</Route>
<Route path="/">
<Home />
</Route>
</Routes>
</Router>
</div>
);
}
export default App;
you need to create each component speratly some things like this:
import React from 'react;
function Home(){
return(
<div>
<h1>Home</h1>
</div>
);
}
export default Home;
import React from 'react;
function Search(){
return(
<div>
<h1>Search</h1>
</div>
);
}
export default Search;
change index.js to :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById("root"));
change App.js to
import React, {useEffect} from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter ,Routes,Route} from 'react-router-dom';
import Search from '.........'
import Home from '.......'
function App(){
return(
<BrowserRouter>
<Routes>
<Route exact path="/" element={<Home/>} />
<Route path="/search" element={<Search/>} />
<Routes>
</BrowserRouter>
);
}
export default App;
if(document.getElementById('app')){
ReactDOM.render(<App/>,document.getElementById('app'));
}
In react-router-dom#6 the Routecomponent API changed significantly. Thechildrenprop is only used for rendering nestedRoutecomponents. All routed content is now rendered on a singleelementprop taking aReactNode`, a.k.a. JSX.
Move the content from being wrapped into the element prop.
function App() {
return (
// BEM
<div className="app">
<Router>
<Routes>
<Route path="/search" element={<h1>This is the search page</h1>} />
<Route path="/" element={<Home />} />
</Routes>
</Router>
</div>
);
}
Route component expects 2 parameters path, and element.
Refer to the official doc here
function App() {
return(
<BrowserRouter>
<Routes>
<Route path="/" element={<Home/>} />
<Route path="/search" element={<Search/>} />
<Routes>
</BrowserRouter>
);
}
guys!
I'm having some kind of trouble when adding a simple /home route to my app. When i add the line below to my App.js, the app turns blank (even the NavBar vanishes):
<Route path='/home' exact component={HomeScreen} />
No compiling or server errors.
Can u give me a light?
App.js
import './App.css';
import Navbar from './components/Navbar';
import HomeScreen from './screens/HomeScreen'
import { BrowserRouter, Route } from 'react-router-dom'
function App() {
return (
<div className="App">
<Navbar/>
<BrowserRouter>
<Route path='/home' exact component={HomeScreen} />
</BrowserRouter>
</div>
);
}
export default App;
HomeScreen.js
import React from 'react';
function HomeScreen() {
return (
<div>
<h1>asdasdHome Screen</h1>
</div>
)
}
export default HomeScreen
Tree
tree
import './App.css';
import Navbar from './components/Navbar';
import HomeScreen from './screens/HomeScreen'
mport { BrowserRouter, Routes, Route} from 'react-router-dom'
function App() {
return (
<div className="App">
<Navbar/>
<BrowserRouter>
<Routes>
<Route path='/home' element={<HomeScreen/>} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
The bit that wasnt working was where you defined your element so change
<Route path='/home' exact component={HomeScreen} />
to this
<Route path='/home' element={<HomeScreen/>} />
Hey Diego now there is react router v6
Where Switch is replaced for Routes and component={HomeScreen} for element={<HomeScreen/>}
import './App.css';
import Navbar from './components/Navbar';
import HomeScreen from './screens/HomeScreen'
import { BrowserRouter, Routes, Route} from 'react-router-dom'
function App() {
return (
<div className="App">
<Navbar/>
<BrowserRouter>
<Routes>
<Route path='/home' element={<HomeScreen/>} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
I think u used Link in Navbar. And the navbar is outside the broweser router. This was my problem.