My Topbar and Sidebar keeps appearing below my LandingPage and Login page, I have tried
separating into multiple functions and exporting, I have tried re-arranging the switch but nothing
works. Please help!!
Below are two methods I've tried, the 1st code doesn't work and so the Topbar and Sidebar still
shows
Here's the 1st code:
<code>
function App() {
return (
<Router>
<Switch>
<Route exact path="/">
<Landingpage />
</Route>
<Route path="/login">
<Login />
</Route>
<Route path="/">
<Appp />
</Route>
</Switch>
</Router>
);
}
function Appp() {
return (
<Router>
<div>
<Topbar />
<div className="container">
<Sidebar />
<Switch>
<Route path="/userProfile">
<UserProfile />
</Route>
<Route path="/project">
<Project />
</Route>
<Route path="/editProject">
<EditProject />
</Route>
<Route path="/testProject">
<TestProject />
</Route>
<Route path="/program">
<Program />
</Route>
<Route path="/users">
<UserList />
</Route>
<Route path="/user/:userId">
<User />
</Route>
<Route path="/newUser">
<NewUser />
</Route>
<Route path="/products">
<ProductList />
</Route>
<Route path="/product/:productId">
<Product />
</Route>
<Route path="/newproduct">
<NewProduct />
</Route>
<Route path="/curiMaps">
<CuriMaps />
</Route>
<Route path="/newMap">
<NewMap />
</Route>
<Route path="/home">
<Home />
</Route>
<Route path="/board">
<Board />
</Route>
</Switch>
</div>
</div>
</Router>
);
}
</code>
and the second code gives this error:
<code>
function App() {
return (
<Router>
<Switch>
<Route exact path="/">
<Landingpage />
</Route>
<Route path="/login">
<Login />
</Route>
<Route path="/">
<Appp />
</Route>
</Switch>
</Router>
);
}
function Appp() {
return (
<div>
<Topbar />
<div className="container">
<Sidebar />
<Switch>
<Route path="/userProfile">
<UserProfile />
</Route>
<Route path="/project">
<Project />
</Route>
<Route path="/editProject">
<EditProject />
</Route>
<Route path="/testProject">
<TestProject />
</Route>
<Route path="/program">
<Program />
</Route>
<Route path="/users">
<UserList />
</Route>
<Route path="/user/:userId">
<User />
</Route>
<Route path="/newUser">
<NewUser />
</Route>
<Route path="/products">
<ProductList />
</Route>
<Route path="/product/:productId">
<Product />
</Route>
<Route path="/newproduct">
<NewProduct />
</Route>
<Route path="/curiMaps">
<CuriMaps />
</Route>
<Route path="/newMap">
<NewMap />
</Route>
<Route path="/home">
<Home />
</Route>
<Route path="/board">
<Board />
</Route>
</Switch>
</div>
</div>
);
}
</code>
1 of 10 errars on the page Error: Invariant failed: You should not use outside a invariant
node_nodutes/tiny-inuariant/dist/tiny-imvariant.esn. js:10 (anonymous function) /Usc
ra/edwin1/Desktop/naduLes/Link. js:89 View conpiled - 20 stack franes were collapsed. This
screen is visithle only in devilgpenent. In will not appear if the app crasies in production. Open
your trawser's developer ecrisale to further inspect this errar. Clies the ' or hit ESC to dismiss this
message..Leer menos
