This question already has an answer here:
React Route render blank page
(1 answer)
Closed 4 months ago.
I was trying to create simple navbar where onclick will redirect to component but unable to redirect to the page.
Like if I click on dogs it should be redirected to home component i have given component navbar where link to dogs is available.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Navbar.js
import React, { useState } from "react";
import { Link } from "react-router-dom";
import Home from "./Home";
import Select from "./Select";
function Navbar({ props }) {
return (
<div className="navbar">
<li>
<Link to="/">Dogs</Link>
</li>
<li>
<Link to="/cats">Cats</Link>
</li>
<li>
<Link to="/sheeps">Sheeps</Link>
</li>
<li>
<Link to="/goats">Goats</Link>
</li>
</div>
);
}
export default Navbar;
Home.js
import React from "react";
function Home() {
return (
<div>
<h3>Dogs</h3>
<div>
<img src="./dog.png"/>
<img src="./dog.png"/>
</div>
</div>
);
}
export default Home;
App.js
import "./App.css";
import Navbar from "./Components/Navbar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Components/Home";
import Select from "./Components/Select";
function App() {
return (
<div className="App">
<Router>
<Navbar />
<Routes>
<Route exact path="/" component={<Home />} />
<Route path="/cats" component={<Select />} />
</Routes>
</Router>
</div>
);
}
export default App;
In new versions of react-router-dom you should use "element" instead of "component"
like:
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/cats" element={<Select />} />
</Routes>
Related
Here is my App.js code
import './App.css';
import Home from './Pages/Home';
import About from './Pages/About';
import Contact from './Pages/Contact';
import {BrowserRouter,Routes,Route ,Link} from 'react-router-dom';
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home/>}/>
<Route Path="/About" element={<About/>}/>
<Route Path="/Contact" element={<Contact/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
and Here is my About page
import React from 'react';
import {Link} from 'react-router-dom';
function About() {
return (
<div>
<h1>This is About</h1>
<Link to="About">Go to About</Link>
</div>
)
}
export default About
React Route is not working.I installed react router Dom already.please help me to fix
Not navigation working
Can you change this
<Link to="About">Go to About</Link>
to
<Link to="/About">Go to About</Link>
I have added / before the "About" in to.
This is my first reactjs application and I have an issue with the navigation. When I try to navigate via url .../posts or ../home only the main App page is showing up. How can I fix this? Thank you in advance!
I have App main page where user can Login or Register:
import React,{useState, useEffect} from 'react';
import {Register} from './subcomponents/Register';
import {Login} from './subcomponents/Login';
export function App() {
return (
<div className="root">
<Login />
<p>Hi {name}</p>
<Register/>
</div>
);
}
Home page, when the user is logged in to be redirected:
import React from 'react';
import { Posts } from './Posts';
import {Home} from './Home.jsx';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import {Nav} from './Nav';
export function Home(){
return(
<div id="home">
<BrowserRouter>
<Nav/>
<Routes>
<Route path='/home' element={<Home/>}/>
<Route path="/posts" element={<Posts/>}/>
</Routes>
</BrowserRouter>
<h3>This is the home page</h3>
</div>
)
}
Nav component:
import React from 'react';
import {Link} from 'react-router-dom'
import '../css/nav.css';
import Logo from '../images/Logo.png';
export function Nav(){
return(
<div id="nav">
<img src={Logo} className="nav-logo" alt="logo"/>
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/posts">Posts</Link>
</li>
</ul>
</div>
)
}
for access to components in the project by url,it need be to render before.
export function App(){
return(
<BrowserRouter>
<div id="app">
<Routes>
<Route path='/home' element={<Home/>}/>
<Route path="/posts" element={<Posts/>}/>
</Routes>
</div>
</BrowserRouter>
)
}
Actually, the problem is when I click on the link the browser don't get the page automatically I always need to refresh then it loads that page, I am new in react so is anyone know how I can rid of this. Thanks in advance
here is my navigation bar code
function MainNavigation() {
return (
<BrowserRouter>
<header>
<div>React Meets Up</div>
<nav>
<ul>
<li>
<Link to="/">AllMeetUp</Link>
</li>
<li>
<Link to="/newmeetup">New MeetUp</Link>
</li>
<li>
<Link to="/favorites">Favourite Page</Link>
</li>
</ul>
</nav>
</header>
</BrowserRouter>
);
}
export default MainNavigation;
here is my app.js code
import { BrowserRouter, Route } from "react-router-dom";
import { Routes } from "react-router-dom";
import MainNavigation from "./components/Layout/MainNavigation";
import AllMeetsUpPage from "./Pages/AllMeetUp";
import FavouritesPage from "./Pages/Favourite";
import NewMeetUpPage from "./Pages/NewMeetUp";
function App() {
return (
<div>
<MainNavigation />
<Routes>
<Route path="/" element={<AllMeetsUpPage />} />
<Route path="/newmeetup" element={<NewMeetUpPage />} />
<Route path="/favorites" element={<FavouritesPage />} />
</Routes>
</div>
);
}
export default App;
and finally here is my index.js code
import ReactDOM from "react-dom";
import {BrowserRouter} from 'react-router-dom';
import "./index.css";
import App from "./App.js";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
I solve this problem by uninstalling the react-router-dom first and then install v5.2.0
I also remove the browser routing tag at the main navigation
Basically, I am learning React Routing with react-router-dom, version 5.0.0 and I have some components like Home, About, Contact etc. and I am trying to change each component by clicking on NavLink but not changing components just changing URL
Indexjs:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './Style.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import Header from "./components/Header";
import Footer from "./components/Footer";
import Web from "./Web";
ReactDOM.render(
<React.Fragment>
<Header />
<Web />
<Footer />
</React.Fragment>
, document.getElementById('root'));
serviceWorker.register();
Web Componet:
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch,withRouter} from "react-router-dom";
//import Route from 'react-router-dom/Route';
import {Home} from "./components/Home";
import {About} from "./components/About";
import {Contact} from "./components/Contact";
import {Products} from "./components/Products";
class Web extends Component {
render() {
return (
<Router>
<Switch>
<Route path={"/"} exact component={withRouter(Home)}/>
<Route path={"/products"} component={withRouter(Products)}/>
<Route path={"/about"} component={About}/>
<Route path={"/contact"} component={Contact}/>
<Route path={"/something"} render={
() => {
return (<h1>This is something page</h1>);
}
}/>
</Switch>
</Router>
);
}
}
export default Web;
Header Component:
import React, { Component } from 'react';
import logo from '../logo.jpg';
import {BrowserRouter as Router, Route, Link, NavLink, Redirect} from "react-router-dom";
class Header extends Component {
render() {
return(
<Router>
<header className={'header_area'}>
<div className="container">
<div className="logo">
<img src={logo} alt="logo"/>
</div>
<nav className={'main_nav'}>
<ul>
<li><NavLink to="/" activeStyle={{color:"green"}} exact>Home</NavLink></li>
<li><NavLink to="/products" activeStyle={{color:"green"}} exact>Products</NavLink></li>
<li><NavLink to="/about" activeStyle={{color:"green"}} exact>About</NavLink></li>
<li><NavLink to="/contact" activeStyle={{color:"green"}} exact>Contact</NavLink></li>
</ul>
</nav>
<div className="float_clear"></div>
</div>
</header>
</Router>
);
}
}
export default Header;
Home Component:
import React from 'react';
export class Home extends React.Component {
render() {
return (
<React.Fragment>
<article className={'article_area'}>
<div className="container article">
<h2>Home</h2>
</div>
</article>
</React.Fragment>
);
}
}
About Component:
import React from 'react';
export class About extends React.Component {
render() {
return (
<React.Fragment>
<article className={'article_area'}>
<div className="container article">
<h2>About us</h2>
</div>
</article>
</React.Fragment>
);
}
}
Can anyone help me?
You should use a single Router and all of your routes and links should have it as one of their parents.
Change your index:
<React.Fragment>
<Router>
<Header />
<Web />
<Footer />
</Router>
</React.Fragment>
and remove other <Router>s
Also you do not need to use withRouter for components inside Route. They will get react-router props directly.
This is the routes.js where all the routes are managed.
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import App from './App';
import Home from './components/home/home';
import Products from './components/products/products';
import AboutUs from './components/aboutUs/aboutUs';
import Careers from './components/careers/careers';
const Routes = () => (
<Router>
<App>
<Route exact path="/" component={Home} />
<Route path="/products" component={Products} />
<Route path="/aboutus" component={AboutUs} />
<Route path="/careers" component={Careers} />
</App>
</Router>
);
export default Routes;
App.js
import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import AppHeader from './components/appHeader/appHeader';
import AppFooter from './components/appFooter/appFooter';
class App extends Component {
render() {
return (
<div className="home">
<AppHeader/>
<div>{this.props.children}</div>
<AppFooter/>
</div>
);
}
}
export default App;
And inside my AppHeader i am using Link to redirect
<div className="nav-module menu-module">
<ul className="menu">
<li>
<Link to="/" className={this.getCurrentPath() == 'home' ? "current":""}>Home</Link>
</li>
<li>
<Link to="/products" className={this.getCurrentPath() == 'products' ? "current":""}>Products</Link>
</li>
<li>
<Link to="/aboutus" className={this.getCurrentPath() == 'aboutus' ? "current":""}>About Us</Link>
</li>
<li>
<Link to="/careers" className={this.getCurrentPath() == 'careers' ? "current":""}>Careers</Link>
</li>
</ul>
</div>
I have no clue why the application refreshes even after using <Link> from react-router-dom. Could version of react-router-dom be an issue or anything else i am missing.
Any help is appreciated .