import React from "react";
import Navbar from "./components/Navbar/navbar.component";
import HomePage from "./pages/homePage/HomePage.component";
import Footer from "./components/Footer/footer.component";
import BlogPage from "./pages/blogPage/BlogPage.component";
import { Route, Switch, BrowserRouter } from "react-router-dom";
function App() {
return (
<div className="App">
<BrowserRouter>
<Navbar />
<Switch>
<Route exact path="./BlogPage" component={BlogPage} />
<Route exact path="./" component={HomePage} />
</Switch>
<Footer />
</BrowserRouter>
</div>
);
}
export default App;
When I run the app the home component loads without any trouble, but it only loads Navbar and Footer Components, Clearly I am doing something wrong but I haven't been able to figure out what.
the path you are using in Route is the path what you see in the browser url. You dont need dot before the path So,
Replace
<Route exact path="./BlogPage" component={BlogPage} />
<Route exact path="./" component={HomePage} />
by this
<Route exact path="/BlogPage" component={BlogPage} />
<Route exact path="/" component={HomePage} />
Related
I have one Navbar in React with the following code
import './App.css';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import Header from './components/header/Header';
import Home from './components/home/Home';
import About from './components/about/About';
import Accessories from './components/accessories/Accessories';
import Category1 from './components/accessories/categories/Category1';
import Category2 from './components/accessories/categories/Category2';
import Category3 from './components/accessories/categories/Category3';
import Category4 from './components/accessories/categories/Category4';
import Contact from './components/contact/Contact';
import Footer from './components/footer/Footer';
const App = () => {
return (
<div className="App">
<Header />
<Router>
<Switch>
<Route exact path="/">
<Home />
<About />
<Accessories />
<Contact />
</Route>
<Route exact path="/category1">
<Category1 />
</Route>
<Route exact path="/category2">
<Category2 />
</Route>
<Route exact path="/category3">
<Category3 />
</Route>
<Route exact path="/category4">
<Category4 />
</Route>
</Switch>
</Router>
<Footer />
</div>
);
}
export default App;
I can go smoothly from / to /category1, but when I reroute to / from /category1, no rerendering is happening until I refresh the page.
I have no idea what to do now. Thank you for any help in advance
Edited: I just changes all my Links to anchor tags and now they are working but is it a good practice?
<Route exact path="/">
<Home />
<About />
<Accessories />
<Contact />
</Route>
Put the above code after all the routes are being defined and it should work
<Switch>
<Route exact path="/category1">
<Category1 />
</Route>
<Route exact path="/category2">
<Category2 />
</Route>
<Route exact path="/category3">
<Category3 />
</Route>
<Route exact path="/category4">
<Category4 />
</Route>
<Route exact path="/">
<Home />
<About />
<Accessories />
<Contact />
</Route>
</Switch>
The '/' path should be defined at the last after all the paths have been defined
You have to use the element to redirect to other routes. In "/category1", you can use the element to redirect "/" without reloading the page.
I have one problem that I can not understand. I am totally a beginner in ReactJS so I hope you will help me. I made Navigation with React Router and it works, but when I start to render all other components in App.js nothings happened. When I am routing through the navigation bar it is rendering, but on scroll, nothing happened.
This is my App.js without rendering other components that work normally, but when I add something like , it is the same without scroll.
my code :
const App = () => {
return (
<div>
<Router>
<Topbar />
<About />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/service" component={Service} />
<Route path="/portfolio" component={Portfolio} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
</div>
);
};
export default App;
You need to use a redirect
1/ import {Redirect} from 'react-router-dom';
2/ Change your Home route to <Route exact path="/home" component={Home} />
3/ Add the redirect (It must be the last route)
<Route exact path="/">
<Redirect to="/home" />
</Route>
Example :
import React from 'react';
import {
BrowserRouter as Router,
Route,
Switch,
Redirect
} from 'react-router-dom';
import Home from './Home';
import About from './About';
import Service from './Service';
import Portfolio from './Portfolio';
import Contact from './Contact';
const App = () => {
return (
<Router>
<Switch>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/service" component={Service} />
<Route path="/portfolio" component={Portfolio} />
<Route path="/contact" component={Contact} />
{/* Redirect */}
<Route exact path="/">
<Redirect to="/home" />
</Route>
</Switch>
</Router>
);
};
export default App;
If you want to check a demo : Stackblitz
whenever i click on any link, it changes the URL but its show's me only one page."Job Category"
import App from "./App";
import User from "./components/UserManagment/Users";
import Agents from "./components/UserManagment/Agents";
import Usertable from "./components/Usertable";
import Usertopbar from "./components/Usertopbar";
import { Switch, Route } from "react-router-dom";
import UserRole from "./components/UserManagment/UserRole";
import Suppliers from "./components/Contact/Suppliers";
import Group from "./components/Contact/Group";
import Mod from "./components/Model";
import Custom from "./components/Contact/Custom";
import Contactmodel from "./components/Contact/Contactmodel";
import Login from "./components/Rm.live/Login";
import Signup from "./components/Rm.live/Signup";
import Rmtable from "./components/Rm.live/rm/Rmtable";
import Blogin from "./components/Bootstrap/Login";
import RmSkills from "./components/Rm.live/rm/RmSkills";
export const Routes = () => {
return (
<>
<Switch>
<Route path="/" component={App} exact />
<Route path="/agents" component={Agents} exact />
<Route patch="/rmskills" component={RmSkills} exact />
<Route patch="/rmtable" component={Rmtable} exact />
<Route path="/Blogin" component={Blogin} exact />
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
<Route path="/user" component={User} exact />
<Route path="/userrole" component={UserRole} exact />
<Route path="/usertable" component={Usertable} exact />
<Route path="/usertopbar" component={Usertopbar} exact />
<Route path="/mod" component={Mod} exact />
<Route Path="/custom" component={Custom} />
<Route path="/group" component={Group} exact />
<Route Path="/contactmodel" component={Contactmodel} />
<Route path="/suppliers" component={Suppliers} exact />
</Switch>
</>
);
};
export default Routes;
when ever i click on any of the link it show me " Job category " page
enter image description here
Wrap your switch inside the browser router. More over re arrange your routes as react will render the first matching route.
import App from "./App";
import User from "./components/UserManagment/Users";
import Agents from "./components/UserManagment/Agents";
import Usertable from "./components/Usertable";
import Usertopbar from "./components/Usertopbar";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import UserRole from "./components/UserManagment/UserRole";
import Suppliers from "./components/Contact/Suppliers";
import Group from "./components/Contact/Group";
import Mod from "./components/Model";
import Custom from "./components/Contact/Custom";
import Contactmodel from "./components/Contact/Contactmodel";
import Login from "./components/Rm.live/Login";
import Signup from "./components/Rm.live/Signup";
import Rmtable from "./components/Rm.live/rm/Rmtable";
import Blogin from "./components/Bootstrap/Login";
import RmSkills from "./components/Rm.live/rm/RmSkills";
export const Routes = () => {
return (
<>
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Switch>
<Route path="/agents" component={Agents} exact />
<Route patch="/rmskills" component={RmSkills} exact />
<Route patch="/rmtable" component={Rmtable} exact />
<Route path="/Blogin" component={Blogin} exact />
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
<Route path="/user" component={User} exact />
<Route path="/userrole" component={UserRole} exact />
<Route path="/usertable" component={Usertable} exact />
<Route path="/usertopbar" component={Usertopbar} exact />
<Route path="/mod" component={Mod} exact />
<Route Path="/custom" component={Custom} />
<Route path="/group" component={Group} exact />
<Route Path="/contactmodel" component={Contactmodel} />
<Route path="/suppliers" component={Suppliers} exact />
<Route path="/" component={App} exact />
</Switch>
</BrowserRouter>
</>
);
};
export default Routes;
I'm trying show Error component if matches not found, but nothing happens - when I choose non-existing route, I see only blank page.
The Main component adds sidebar menu in example and renders all it childes inside in rest.
When all Route componets placed directly inside Switch - all works (including Error).
But in example below, Error component does not render - if route does not match - only blank page.
If Error component placed inside Main, in that case it will be rendered even for existing routes.
import React from 'react';
import { Switch, Route } from "react-router-dom";
import Signin from "../../containers/Signin";
import Signup from "../../containers/Signup";
import Error from "../../containers/Error";
import Courses from "../../containers/Courses";
import Course from "../../containers/Course";
import Quiz from "../../containers/Quiz";
import Header from "../Header";
import "./App.css";
import Library from "../../containers/Library";
import QuizResults from "../../containers/QuizResults";
import Main from "../Main";
import StudentsList from "../../containers/StudentsList";
function App()
{
return (
<div className="App">
<Header isLogged={false}/>
<Switch>
<Route exact path='/' component={Signin} />
<Route path='/signup' component={Signup} />
<Main>
<Route path='/courses' component={Courses} />
<Route path='/course/:id' component={Course} exact/>
<Route path='/quiz' component={Quiz} />
<Route path='/library' component={Library} />
<Route path='/quiz-results' component={QuizResults} />
<Route path='/students' component={StudentsList} />
<Route component={Error} />
</Main>
</Switch>
</div>
);
}
export default App;
So, how to properly render Error component if no matches found?
Try using a wildcard.
<Route path="/*" component={Error} />
Add exact word to the route. And better approach will be to set the Error component name to NotFound or FourZeroFour . It will work then.
<Router>
<Switch>
<Route exact path='/' component={Signin} />
<Route exact path='/signup' component={Signup} />
<Main>
<Route exact path='/courses' component={Courses} />
<Route exact path='/course/:id' component={Course} />
<Route exact path='/quiz' component={Quiz} />
<Route exact path='/library' component={Library} />
<Route exact path='/quiz-results' component={QuizResults} />
<Route exact path='/students' component={StudentsList} />
<Route component={NotFound} />
</Main>
</Switch>
</Router>
Solution for this problem - place another Switch around Route components:
import React from 'react';
import { Switch, Route } from "react-router-dom";
import Signin from "../../containers/Signin";
import Signup from "../../containers/Signup";
import NotFound from "../../containers/NotFound";
import Courses from "../../containers/Courses";
import Course from "../../containers/Course";
import Quiz from "../../containers/Quiz";
import Header from "../Header";
import "./App.css";
import Library from "../../containers/Library";
import QuizResults from "../../containers/QuizResults";
import Main from "../Main";
import StudentsList from "../../containers/StudentsList";
function App()
{
return (
<div className="App">
<Header isLogged={false}/>
<Switch>
<Route exact path='/' component={Signin} />
<Route exact path='/signup' component={Signup} />
<Main>
<Switch>
<Route exact path='/courses' component={Courses} />
<Route exact path='/course/:id' component={Course} />
<Route exact path='/quiz' component={Quiz} />
<Route exact path='/library' component={Library} />
<Route exact path='/quiz-results' component={QuizResults} />
<Route exact path='/students' component={StudentsList} />
<Route path='*' component={NotFound} />
</Switch>
</Main>
</Switch>
</div>
);
}
export default App;
I am having trouble in changing the page in react with react-router-dom. here is my router :-
import { Route, Switch, BrowserRouter } from 'react-router-dom';
import HomePage from '../pages/grocery';
import Profile from '../pages/profile';
import CheckoutPage from '../pages/checkout';
export default function Routes(props) {
return (
<BrowserRouter>
<Switch>
<Route path="/" name="Home" component={HomePage} exact />
<Route path="/profile" name="Profile" component={Profile} />
<Route path="/checkout" name="Checkout" component={CheckoutPage} />
</Switch>
</BrowserRouter>
);
}
and here is my Link tag
<Link to="/profile">Profile</Link>
the problem here is that the second Route element, have a "/" too, and the first one will access any element that starts with an "/".
How to fix this?
with Route you can put "exact" just before path, so it will only access that specific route, no matters what comes after that.
example:
<Route exact path="/" name="Home" component={HomePage} />
<Route exact path="/profile" name="Profile" component={Profile} />
<Route exact path="/checkout" name="Checkout" component={CheckoutPage} />
this way you will not have problems accessing your others pages or components.