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 .
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>
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>
)
}
I'm working on converting a website from a static HTML/CSS/JS site into a React SPA and I want to use React Router for navigation. I installed Router into the correct directory, ran npm start from the correct directory, and my Terminal shows that everything compiled successfully, but my browser looks like this:
App.js file:
import React from 'react';
import './styles/App.css';
import Navbar from './components/Navbar';
class App extends React.Component {
render() {
return (
<div className = "App">
<div id ='container' className = 'container light'>
<Navbar />
</div>
</div>
)
}
}
export default App;
Navbar.js file:
import React, { Component } from 'react';
import '../styles/App.css';
import logo from '../img/logo.png'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import App from '../App';
import About from './About';
import Portfolio from './Portfolio';
class Navbar extends Component {
render() {
return (
<Router>
<div className="Navbar">
<nav>
<ul className="navlist">
<Link to={App}>
<li className="active">Home</li>
</Link>
<Link to={About}>
<li>About Me</li>
</Link>
<Link to={App}>
<img className="brand" src={logo} alt="" />
</Link>
<Link to={Portfolio}>
<li>Portfolio</li>
</Link>
<li className="toggler"><span role="img" aria-label="dark moon">🌑</span></li>
</ul>
</nav>
<Switch>
<Route path= {About}>
<About />
</Route>
<Route path= {Portfolio}>
<Portfolio />
</Route>
<Route path= '{App}'>
<App />
</Route>
</Switch>
</div>
</Router>
)
}
}
export default Navbar;
About.JS
import React, { Component } from 'react';
import '../styles/App.css';
import Navbar from './Navbar'
class About extends Component {
render() {
return (
<div className="About">
<Navbar />
<h1>Hello World, This is the About Page</h1>
</div>
)
}
}
export default About;
Portfolio.JS
import React, { Component } from 'react';
import '../styles/App.css';
import Navbar from './Navbar'
class Portfolio extends Component {
render() {
return (
<div className="Portfolio">
<Navbar />
<h1>Hello World, This is the Portfolio Page</h1>
</div>
)
}
}
export default Portfolio;
I'm new to React and I'm not sure what I've done wrong. Happy to share any additional information needed.
That's not how Link is used, the to prop should have the path you want to navigate, and then you have to use the Route HOC with two options, pass the component as a child or in the component prop
Link
<Link to="/about">
About
</Link>
Route
<Route path="/about" component={About} />
<Route path="/about">
<About/>
</Route>
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>
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>