Why is react router not displaying the required element? - javascript

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.css';
import Chat from './Chat';
import Sidebar from './Sidebar';
function App() {
return (
<div className="app">
<div className="app__body">
<Router>
<Switch>
<Sidebar/>
<Route exact path="/">
<h1>This is home screen</h1>
</Route>
<Route path="/rooms/:roomId">
<Chat/>
</Route>
</Switch>
</Router>
</div>
</div>
);
}
export default App;
The code is showing the sidebar properly..But its neither displaying 'This is home screen' on default home page nor the component when I change url to room/someid..According toz this answer I even added exact before the path. Why is Route not working?

Related

Why do we use Routes instead of Switches in React? Whereas our work is done by the switch

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.

While using Route the site is not loading , when i am wrapping inside BroswerRoute only its working

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/>} />

Only my navbar is being displayed in my react project

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.

i want different navbar on my admin routes

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;

React router , routes not workin

I am tried to make a chat room application with react js,
but I have faced a problem when I tried to see just chatroom page then it's ok, but when I refresh the page then again show me the home page that mean show me both page in the chatroom page, I don't know why show me home page again,
I have tried this way:
import React from "react";
import { Router, Route } from "react-router-dom";
import HomePage from "./HomePage";
import TopBar from "./TopBar";
import { createBrowserHistory as createHistory } from "history";
import "./App.css";
import ChatRoomPage from "./ChatRoomPage";
const history = createHistory();
function App() {
console.log("Working");
return (
<div className="App">
<Router history={history}>
<TopBar />
<Route path="/:chatRoomId" component={HomePage} />
<Route
path="/chatroom"
exact
render={(props) => <ChatRoomPage {...props} />}
/>
</Router>
</div>
);
}
export default App;
any suggestion please.
You should use react router dom exact way
like: import { BrowswerRouter as Router, Route, Switch } from "react-router-dom";
then take upper the render router.
import React from "react";
import { BrowswerRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./HomePage";
import TopBar from "./TopBar";
import { createBrowserHistory as createHistory } from "history";
import "./App.css";
import ChatRoomPage from "./ChatRoomPage";
const history = createHistory();
function App() {
console.log("Working");
return (
<div className="App">
<Router history={history}>
<TopBar />
<Switch>
<Route
path="/chatroom"
exact
render={(props) => <ChatRoomPage {...props} />}
/>
<Route path="/:chatRoomId" component={HomePage} />
</Switch>
</Router>
</div>
);
}
export default App;

Categories

Resources