import React from "react";
// import { BrowserRouter as Router, Route, Switch} from "react-router-dom"
import Home from "./Home";
import Header from "./Header";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
const App = () => {
return (
//BEM
<Router>
<div className="app">
{/* Switch case */}
<Switch>
{/* checkout page */}
<Route path="/checkout" >
<Header/>
{/* Header */}
<h1>I am a Checkout, Smash the like button</h1>
</Route>
<Route path="/" >
<Header/>
<Home/>
</Route>
</Switch>
</div>
</Router>
);
};
export default App;
I am update the code with the help of Routes, but my page is gone. So what do I convert?
import React from "react";
import Home from "./Home";
import Header from "./Header";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
const App = () => {
return (
//BEM
<Router>
<div className="app">
<Routes>
{/* checkout page */}
<Route path="/checkout" element={<Header/>} >
<h1>I am a Checkout, Smash the like button</h1>
<Route path="/" element={Header/>} />
//Here I want both page link in one path Header and Home.
</Route>
</Routes>
</div>
</Router>
);
};
export default App;
From what I can understand of your question you are trying to render a common Header component with each route. For this you can render the Header component on a layout route that renders also an Outlet component for nested children routes.
Example:
import React from "react";
import Home from "./Home";
import Header from "./Header";
import { BrowserRouter as Router, Routes, Route, Outlet } from "react-router-dom";
const Layout = () => (
<>
<Header />
<Outlet />
</>
);
const App = () => {
return (
<Router>
<div className="app">
<Routes>
<Route element={<Layout />}>
{/* checkout page */}
<Route
path="/checkout"
element={<h1>I am a Checkout, Smash the like button</h1>}
/>
<Route path="/" element={<Home />} />
</Route>
</Routs>
</div>
</Router>
);
};
See nested routes in the documentation for more details.
Related
Im trying to create a PrivateRoutes in addition to the regular routes.
After login, the page is successfully re-direct to /home, however when I tried to open /work, the page will go back to /home. all the data from state.valid is also shows "unidentified" in /work.
I figured it out that inside the privateRoutes it check if valid.isAuthenticated is true or not. However since. valid.isAuthenticated is set to false as initial value in reducer, everytime I open /home or /work, it re-render /login and then render /home or /work.
How do I fix to not to render /login before opening other pages?
Here is my PrivateRoutes.js
import React from "react";
import { useSelector } from "react-redux";
import { Navigate } from "react-router-dom";
const PrivateRoute = ({ children }) => {
const valid = useSelector((state) => state.valid);
return valid.isAuthenticated ? children : <Navigate to="/login" />;
};
export default PrivateRoute;
here is my AppRouter.js
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import PrivateRoute from "./PrivateRoute";
import App from "../components/App";
import Login from "../components/Login";
import HomePage from "../components/HomePage";
import WorkPage from "../components/WorkPage";
const AppRouter = () => (
<BrowserRouter>
<div>
<NavigationBar />
<div>
<Routes>
<Route path="/" element={<App />} exact />
<Route path="/login" element={<Login />} exact />
<Route path="/home" element={<PrivateRoute><HomePage /></PrivateRoute>} />
<Route path="/work" element={<PrivateRoute><WorkPage /></PrivateRoute>} />
</Routes>
</div>
</div>
</BrowserRouter>
);
export default AppRouter;
useEffect(() => {
if (valid.isAuthenticated) {
navigate("/home");
}
},[valid.isAuthenticated]);
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import PrivateRoute from "./PrivateRoute";
import App from "../components/App";
import Login from "../components/Login";
import HomePage from "../components/HomePage";
import WorkPage from "../components/WorkPage";
const AppRouter = () => {
useEffect(() => {
if (!valid.isAuthenticated) {
navigate("/login");
}
});
return (
<BrowserRouter>
<div>
<NavigationBar />
<div>
{valid.isAuthenticated ? <>
<Routes>
<Route path="/" element={<App />} exact />
<Route path="/home" element={<HomePage />} />
<Route path="/work" element={<WorkPage />} />
</Routes>
</>
:
<>
<Routes>
<Route path="/login" element={<Login />} exact />
</Routes>
</>
}
</div>
</div>
</BrowserRouter>
)
};
export default AppRouter;
this my App.js Code , not able to find any solution .All item are imported and its working fine if its not wrapped in Route
import React from 'react';
import './App.css';
import { BrowserRouter, Route } from "react-router-dom"
import Home from './Pages/Home';
import SignUpPage from './Pages/SignUpPage';
function App() {
return (
<div className="App">
<BrowserRouter>
<Route >
<Home />`enter code here`
</Route>
<Route path='/signup'>
<SignUpPage />
</Route>
</BrowserRouter>
</div >
);
}
export default App;
You're not wrapping your routes correctly, this is how it should be with react-router-dom v6:
import React from "react";
import './App.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Pages/Home";
import SignUpPage from "./Pages/SignUpPage";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/signup" element={<SignUpPage />} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
You wrap your routes in a routes component, imported from react-router-dom. You can Then declare your route on one line <Route path="/insertPathHere" element={<YourComponent/>} />
This question already has answers here:
How do I render components with different layouts/elements using react-router-dom v6
(2 answers)
Closed 8 months ago.
I have a React application with React Router Dom v6 and trying to render the Nav component when the path does NOT match the root "/" but I'm having trouble getting it to work. This is my code:
import { BrowserRouter as Router, Routes, Route, matchPath } from "react-router-dom";
import Nav from "./components/Nav/Nav";
import Home from "./components/Home/Home";
import Contributors from "./components/Contributors/Contributors";
const App = () => {
const match = matchPath({ path: "/", end: true }, "/");
return (
<Router>
{!match ? <Nav /> : null}
<Routes>
<Route path="/" exact element={<Home />} />
<Route path="/contributors" element={<Contributors />} />
</Routes>
</Router>
);
}
export default App;
How should I fix this?
Quick Solution:
You could simply do like below, adding the Nav where you want. I'm not sure if you can know the path in App, since it's not wrapped inside the Router.
import { BrowserRouter as Router, Routes, Route, matchPath } from "react-router-dom";
import Nav from "./components/Nav/Nav";
import Home from "./components/Home/Home";
import Contributors from "./components/Contributors/Contributors";
const App = () => {
return (
<Router>
<Routes>
<Route path="/" exact element={<Home />} />
<Route path="/contributors" element={<><Nav /><Contributors /></>} />
</Routes>
</Router>
);
}
export default App;
Improvement:
And if you want to take it further, instead of doing like above, you could set up a Layout component, like this:
import { Outlet } from "react-router-dom";
import Nav from "../Nav/Nav";
const Layout () => {
return (
<>
<Nav />
<Outlet />
</>
);
};
export default Layout;
And render the routes where you want the Nav trough the Layout:
import { BrowserRouter as Router, Routes, Route, matchPath } from "react-router-dom";
import Home from "./components/Home/Home";
import Contributors from "./components/Contributors/Contributors";
import Layout from "./components/Layout/Layout";
const App = () => {
return (
<Router>
<Routes>
<Route path="/" exact element={<Home />} />
<Route element={<Layout />}>
<Route path="/contributors" element={<Contributors />} />
</Route>
</Routes>
</Router>
);
}
export default App;
Only my navbar is displaying and im not recieving any error. the homepage has just the navbar and a blank space
'''
import React from 'react';
import Navbar from './components/Navbar';
import './App.css';
import Home from './components/pages/Home';
import { BrowserRouter as Router, Routes as Switch, Route } from 'react-router-dom';
import Services from './components/pages/Services';
import Products from './components/pages/Products';
import SignUp from './components/pages/SignUp';
function App() {
return (
<>
<Router>
<Navbar />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/services' component={Services} />
<Route path='/products' component={Products} />
<Route path='/sign-up' component={SignUp} />
</Switch>
</Router>
</>
);
}
export default App;
'''
For you see your navbar in other pages you can test going to localhost:3000/services and see if your navbar is there.
import Navbar from "./components/Navbar.js"
import Footer from "./components/Footer.js"
import './index.css'
import HomePage from "./pages/HomePage/HomePage.js";
import {
Routes,
Route,
} from "react-router-dom";
import ProductPage from "./pages/ProductPage.js";
import CreateProduct from './pages/admin/CreateProduct'
function App() {
return (
<div className="App">
<>
<Navbar/>
<Routes>
<Route exact path="/" element={<HomePage/>} />
<Route exact path="/product/:id" element={<ProductPage />}/>
</Routes>
<Footer/>
<Routes>
<Route exact path="sarangAdmin/create-product" element={<CreateProduct/>} />
</Routes>
</>
</div>
);
}
export default App;
As you can see in the route of sarangAdmin i dont want the default navbar and fotter appear i want to create a new one for the admin the problem is then when i going on this route i am seeing navbar nad footer but not my create componenet what i want is that i should not see the navbar and footer component and see my create-product componenet
I think it's better that you change Footer & Navbar component
at first add location to app params app({ location })
then
{location.pathname!=='sarangAdmin/create-product'?<Footer/>}
I hope this code will help you
import Navbar from "./components/Navbar.js"
import Footer from "./components/Footer.js"
import './index.css'
import HomePage from "./pages/HomePage/HomePage.js";
import {Routes,Route} from "react-router-dom";
import ProductPage from "./pages/ProductPage.js";
import CreateProduct from './pages/admin/CreateProduct'
const App = ({location}) => {
return (
<div className="App">
{location.pathname!=='sarangAdmin/create-product'?<Navbar/>:null}
<Routes>
<Route exact path="/" element={<HomePage/>} />
<Route exact path="/product/:id" element={<ProductPage />}/>
<Route exact path="sarangAdmin/create-product" element={<CreateProduct/>} />
</Routes>
{location.pathname!=='sarangAdmin/create-product'?<Footer/>:null}
</div>
);
};
export default App;