I use Router component in my react app to show different components when clicking the navbar. however, when I click a link in navbar, the address shows the path but the component which I call when the path equals that, is now shown in the page.
this is my App.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
import NavBar from "./Components/navBar";
import Header from "./Components/ddrHeader";
import Home from "./Components/home";
import Plan from "./Components/plan";
import Waiting from "./Components/waiting";
import "./App.css";
class App extends Component {
render() {
return (
<Router>
<React.Fragment>
<NavBar />
<Switch>
<Route exact path="/" Component={Home} />
<Route path="/ddr" Component={Header} />
<Route path="/plan" Component={Plan} />
<Route path="/waiting" Component={Waiting} />
</Switch>
</React.Fragment>
</Router>
);
}
}
export default App;
this is my index.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import * as serviceWorker from "./serviceWorker";
// import DDR from './Components/ddr';
import App from "./App";
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
serviceWorker.register();
and this is my navbar :
import React, { Component } from "react";
import { Link, BrowserRouter as Router } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.css";
class NavBar extends Component {
render() {
return (
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<ul class="navbar-nav">
<li class="nav-item active">
<Link className="nav-link" to="/">
Home<span class="sr-only">(current)</span>
</Link>
</li>
<li class="nav-item">
<Link className="nav-link" to="/ddr">
DDR
</Link>
</li>
<li class="nav-item">
<Link className="nav-link" to="/plan">
Plan
</Link>
</li>
<li class="nav-item">
<Link className="nav-link" to="/waiting">
Waiting
</Link>
</li>
</ul>
</nav>
);
}
}
export default NavBar;
as react-router(component prop). The prop Component is wrong, should be component
<Switch>
// <Route exact path="/" Component={Home} /> // wrong
<Route exact path="/" component={Home} /> //correct
</Switch>
Related
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>
Here is the App.js:
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import NavBar from "./components/navbar.component";
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";
function App() {
return (
<Router>
<div className="container">
<NavBar />
<br />
<Route path="/" component={ExercisesList} />
<Route path="/edit/:id" component={EditExercise} />
<Route path="/create" component={CreateExercise} />
<Route path="/create" component={CreateUser} />
</div>
</Router>
);
}
export default App;
here is Navbar component code:
import React, { Component } from "react";
import { Link } from "react-router-dom";
export default class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-dark bg-dark never-expend-lg ">
<Link to="/" className="navbar-brand">
ExeriseTracker
</Link>
<div className="collpase navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="navbar-item">
<Link to="/" className="nav-link">
Exercises
</Link>
</li>
<li className="navbar-item">
<Link to="/create" className="nav-link">
Create Exercise Log
</Link>
</li>
<li className="navbar-iteam">
<Link to="/user" className="nav-link">
Create User
</Link>
</li>
</ul>
</div>
</nav>
);
}
}
this a react app which has other component other then nav bar but the react routing is not working, Can any one help on this?
Also i have used some basic bootstrap code just for testing.
the result are here where im clicking one thing and it coming up with 3 statements from other 3 pages in this same page.
enter image description here
In app.js, import Switch from react-router-dom and wrap your routes in Switch:
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
...
<Switch>
<Route path="/" component={ExercisesList} />
<Route path="/edit/:id" component={EditExercise} />
<Route path="/create" component={CreateExercise} />
<Route path="/create" component={CreateUser} />
</Switch>
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 .
My folder structure
reactdemo
|------------>public
|------------>src
|------->Component
|------->index.js
<-------------index.js------------>
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import ReactDOM from 'react-dom';
import Header from './Component/Header';
import Footer from './Component/Footer';
import Content from './Component/Content';
import About from './Component/about';
import Contact from './Component/Contact';
import JSON from './Component/db.json';
class App extends React.Component {
state = {
items:JSON
}
render() {
// console.log(this.state.items)
return (
<div>
<Header/>
<Content list={this.state.items} />
<Footer />
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
<---------Header Component------------->
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
//Component
import About from './about.js';
import Contact from './Contact.js';
class Header extends React.Component {
render() {
return (
<Router>
<div>
<nav className="navbar navbar-expand-sm bg-dark navbar-dark">
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/">Home</Link>
</li>
<li className="nav-item">
<Link to="/about">About</Link>
</li>
<li className="nav-item">
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Switch>
<Route path='/About' Component={About} />
<Route path='/Contact' Component={Contact} />
</Switch>
</div>
</Router>
);
}
}
export default Header;
<----------Content---------------->
import React from 'react';
const Content =(props) => {
console.log(props)
const test = props.list.map((list) => {
return (
<div key={list.id}>
<h4>{list.title}</h4>
<p>{list.feed}</p>
</div>
)
}
)
return (
<div>
{test}
</div>
)
}
export default Content;
<---------footer.js---------->
import React from 'react';
class Footer extends React.Component {
render() {
return (
<div className="text-center">
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone#example.com">
someone#example.com</a>.</p>
</div>
);
}
}
export default Footer;
<---------about---------->
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
class About extends Component {
render() {
return (
<div>
<h2>About</h2>
</div>
);
}
}
export default About;
<------------Contact---------->
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
class Contact extends Component {
render() {
return (
<div>
<h2>Contact</h2>
</div>
);
}
}
export default Contact;
<-----------End of Code-------->
I'm new to react and trying to implement react router. But I'm facing an issue- whenever I click on About and Contact link, the url changes in the browser, but the contents don't show in the browser. I have created separate contents for both "about" and "contact" inside the Components folder.Also, I'm using Sublime text 3 and using Babel for ES-6 as plugin but it's showing syntax error.I have also attached a screenshot for showing the issue
You write your component attribute with first letter uppercase, so Component should be component:
So instead of:
<Route path='/About' Component={About} />
<Route path='/Contact' Component={Contact} />
You should have:
<Route path='/About' component={About} />
<Route path='/Contact' component={Contact} />
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
//Component
import About from './about.js';
import Contact from './Contact.js';
class Header extends React.Component {
render() {
return (
<Router>
<div>
<nav className="navbar navbar-expand-sm bg-dark navbar-dark">
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/">Home</Link>
</li>
<li className="nav-item">
<Link to="/about">About</Link>
</li>
<li className="nav-item">
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Switch>
<Route path='/About' component={About} />
<Route path='/Contact' component={Contact} />
</Switch>
</div>
</Router>
);
}
}
export default Header;
It's not a deal breaker to use the path prop value to uppercase, because it's not case sensitive by default, but is recommended to have the <Route> path props the same you define on the <Link>, in case you have a prop like sensitive defined on the <Route> element.
In this case your final piece of code should look like this:
<Route path='/about' component={About} />
<Route path='/contact' component={Contact} />
You can read more about this in the docs here.
the Link paths are defined as /about and /contact, where the Route paths are /About and /Contact, notice the uppercase first character and hence it doesn't match, also Route accepts a lower case component prop and not Component
<Router>
<div>
<nav className="navbar navbar-expand-sm bg-dark navbar-dark">
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/">Home</Link>
</li>
<li className="nav-item">
<Link to="/about">About</Link>
</li>
<li className="nav-item">
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Switch>
<Route path='/about' component={About} />
<Route path='/contact' component={Contact} />
</Switch>
</div>
</Router>