I am trying to use the router in react but I get nothing when changing the path, you can check the code here Link ..............................
import React from "react";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Layout>
<Router>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
</Router>
</Layout>
);
}
export default App;
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function Layout({ children }) {
return (
<div>
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</Router>
<div>{children}</div>
</div>
);
}
export default Layout;
Place the <div>{children}</div> inside <Router>, then in app.js remove Router. Because that has already been declared in <Layout>
Layout.js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function Layout({ children }) {
return (
<div>
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<div>{children}</div>
</Router>
</div>
);
}
export default Layout;
App.js
import React from "react";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Layout>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
</Layout>
);
}
export default App;
Your current code will output the following:
<div>
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</Router>
{/* Children (App.js) */}
<Router>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
</Router>
{/* Children (App.js) */}
</div>
You don't need two instances of <Router>.
This how it should be:
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
{/* Children (App.js) */}
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
{/* Children (App.js) */}
</Router>
you need to remove Router from your route wrap
import React from "react"; import Layout from "./Layout"; import Home from "./Home"; import About from "./About"; import { BrowserRouter as Routes, Route } from "react-router-dom";
function App() { return (
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
); }
export default App;
The Problem is, that you have two different Routers in your Application.
You need to move the Layout Component inside your Routercomponent in App.js
And then delete the second router inside of Layout.
More info here:
Error: useHref() may be used only in the context of a <Router> component. It works when I directly put the url as localhost:3000/experiences
Related
Here is my code
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
//import Login from "./components/Login/Login";
import Sidebar from "./components/sidebar/Sidebar.jsx";
import Topbar from "./components/topbar/Topbar.jsx";
import Home from "./Pages/home/Home";
import UserList from "./Pages/userList/UserList";
function App() {
return (
<Router>
<Topbar />
<div className="container">
<Sidebar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/user" element={<UserList />} />
</Routes>
</div>
</Router>
);
}
export default App;
In the above code the Topbar and Sidebar components render but Home and Userlist components do not. What could be wrong?
This is my App.js
import "./App.css";
import Header from "./component/layout/Header/Header.js";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import React from "react";
import Home from "./component/Home/Home.js";
function App() {
return (
<Router>
<Header />
<Route exact path="/" component={Home} />
<Footer />
</Router>
);
}
export default App;
This is my Home.js
const Home = () => {
return (
<Fragment>
<div className="banner">
<p>Welcome to My Website</p>
</div>
</Fragment>
);
};
export default Home;
Edit: i managed to remove the black page after wrapping the Route but the text in Home.js doesn't show "Welcome to My Website"
<Routes>
<Route exact path="/" component={Home} />
</Routes>
this code ^ removed the blank page but the result is that the text from Home.js "Welcome to My Website" didn't show. How can I route correctly to the Home component?
If you are using v6 react-router-dom, you have to replace component to element
<Routes>
{/* <Route exact path="/" component={Home} /> */}
<Route exact path="/" element={<Home />} />
</Routes>
I'm in the very first step to create an project, but the react-router-dom's 'Route' just don't work. When i try to use it, just erase all other things in the screen.
My app.js:
import { BrowserRouter, Route } from 'react-router-dom';
import './App.css';
import Header from './components/Header';
import CoinPage from './Pages/CoinPage';
import Homepage from './Pages/Homepage';
function App() {
return (
<BrowserRouter>
<div>
<Header />
<Route path="/" component={Homepage} />
<Route path="/coins/:id" component={CoinPage} />
</div>
</BrowserRouter>
);
}
export default App;
My CoinPage.js:
import React from 'react'
const CoinPage = () => {
return (
<div>
Coin Page
</div>
)
}
export default CoinPage
My Homepage.js:
import React from 'react'
export const Homepage = () => {
return (
<div>
Homepage
</div>
)
}
export default Homepage
My Header.js:
import React from 'react'
/*The header it self:*/
export const Header = () => {
return (
<div>
Header
</div>
)
}
export default Header
When I remove <Route path="/" component={Homepage}/> and <Route path="/coins/:id" component={CoinPage} /> the 'Header' component appears again
You need to wrap all your Route inside Routes Component
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
<BrowserRouter>
<div>
<Header />
<Routes>
<Route path="/" component={Homepage} />
<Route path="/coins/:id" component={CoinPage} />
</Routes>
</div>
</BrowserRouter>
If you are using v6, then component has been replaced by element in Route
<Route path="/" element={<Homepage />} />
<Route path="/coins/:id" element={<CoinPage />} />
Solved!
I needed to change component to element and put each Route in a different Routes tag. Like that:
<BrowserRouter>
<div>
<Header />
<Routes>
<Route path="/" element={<Homepage />} />
</Routes>
<Routes>
<Route path="/coins/:id" element={<Coinpage />} />
</Routes>
</div>
</BrowserRouter>
I'm new to learning React so I'm wondering if anyone can help me. I'm currently building a portfolio through React and I'm working on the Nav for this. I'm not getting any errors in the Console and when I click on each Link, it displays the Link I've clicked on in the URL but it won't show me any of my Content from each Link. Can anyone please help explain where I am going wrong?
App Code
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Projects from './Projects.js';
import Contact from './Contact.js';
import About from './About.js';
import Skills from './Skills.js';
import Home from './App.js';
import './App.css';
function App() {
return (
<BrowserRouter>
<div className="App">
<Route path="/" element={<Home />}></Route>
<Route path="/about" element={<About />}></Route>
<Route path="/contact" element={<Contact />}></Route>
<Route path="/projects" element={<Projects />}></Route>
<Route path="/skills" element={<Skills />}></Route>
<div className="navigation">
<div className="navigation-sub">
<Link to="/" className="item">Home</Link>
<Link to="/about" className="item">About</Link>
<Link to="/contact" className="item">Contact</Link>
<Link to="/projects" className="item">Projects</Link>
<Link to="/skills" className="item">Skills</Link>
</div>
</div>
</div>
</BrowserRouter>
);
}
export default App;
index Code
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
About Code
import React from "react";
function About(props) {
return (
<div>
<h1>About Me</h1>
</div>
)
}
export default About;
Thanks :)
You are already rendering a BrowserRouter around App, so remove the extraneous BrowserRouter from App. The Route components are also missing being wrapped in a Routes component that handles path matching. It's a required component. You should have some console errors warning of invariant violations for the rendering of a router within another router and the routes not being wrapped directly by a Routes component.
import { Routes, Route } from 'react-router-dom';
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="/projects" element={<Projects />} />
<Route path="/skills" element={<Skills />} />
</Routes>
<div className="navigation">
<div className="navigation-sub">
<Link to="/" className="item">Home</Link>
<Link to="/about" className="item">About</Link>
<Link to="/contact" className="item">Contact</Link>
<Link to="/projects" className="item">Projects</Link>
<Link to="/skills" className="item">Skills</Link>
</div>
</div>
</div>
);
}
import React, { useContext } from 'react';
import Sidebar from "./components/sidebar/Sidebar";
import Topbar from "./components/topbar/Topbar";
import "./app.css";
import Home from "./pages/home/Home";
import { BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom";
import UserList from "./pages/userList/UserList";
import User from "./pages/user/User";
import NewUser from "./pages/newUser/NewUser";
import ProductList from "./pages/productList/ProductList";
import Product from "./pages/product/Product";
import NewProduct from "./pages/newProduct/NewProduct";
import Login from './pages/login/Login';
import { AuthContext } from './context/authContext/AuthContext';
function App() {
const { user } = useContext(AuthContext);
return (
<Router>
<Routes>
<Route path="/login" element={user ? <Navigate to='/' />: <Login />} />
{user && (
<>
<Topbar/>
<div className="container">
<Sidebar />
<Route exact path="/" element={<Home />} />
<Route path="/users" element={<UserList />} />
<Route path="/user/:userId" element={<User />} />
<Route path="/newUser" element={<NewUser />} />
<Route path="/movies" element={<ProductList />} />
<Route path="/product/:productId" element={<Product />} />
<Route path="/newproduct" element={<NewProduct />} />
</div>
</>
)}
</Routes>
</Router>
);
}
export default App;
After I run this code show this error..
index.tsx:19
Uncaught Error: [Topbar] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
at invariant (index.tsx:19)
at index.tsx:776
at react.development.js:1104
at react.development.js:1067
at mapIntoArray (react.development.js:964)
at mapIntoArray (react.development.js:1004)
at mapChildren (react.development.js:1066)
at Object.forEachChildren [as forEach] (react.development.js:1103)
at createRoutesFromChildren (index.tsx:760)
at index.tsx:769
I think React version 5 haven't this problem in code. with
Switch.....
I need help for how to implement div in react version 6....with
Routes ?
And I need to help fix Topbar and sidebar problem