when i use link on my navbar component it changes the url but does not change the component, but it changes component when i reload,when i put link in main app.js it routes perfectly
app.js
import './App.css';
import Navbar from './Navbar/Navbar'
import About from './About/About'
import { Route, Link, BrowserRouter as Router ,Switch} from 'react-router-dom'
function App() {
return (
<div>
<Navbar/>
<Router>
<Link to="/about">about</Link>
<Switch>
<Route exact path="/about">
<About/>
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
navbar.js
import React from 'react'
import './Navbar.css'
import { Link, Router, BrowserRouter} from 'react-router-dom';
function Navbar() {
return (
<div>
<nav className="navbar">
<div>
<h1 className="nav_text">ExportGrains</h1>
</div>
<ul className="nav_ul">
<BrowserRouter>
<Link to="/about">about</Link>
<li id="nav_li">HOME</li>
<li id="nav_li">PRODUCTS</li>
<li id="nav_li">ABOUT</li>
<li id="nav_li">CONTACT</li>
</BrowserRouter>
</ul>
</nav>
</div>
)
}
export default Navbar
about.js
import React from 'react'
function About() {
return (
<div>
<h1>about page</h1>
</div>
)
}
export default About;
it would be very kind if you can help me with it
It should be
import About from "...."
....
....
<Route path="/about" exact component={About} />
You should use one single Router for all your routes. The problem is that navbar is using different router and your other components are inside another router. So remove the router inside navbar and use single router inside your app component.
Also you can add Navbar as default route and put it at the end of the switch so that it matches when none of the above routes are matching.
function App() {
return (
<Router>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Navbar />
</Route>
</Switch>
</Router>
);
}
Switch renders the first child <Route> or <Redirect> that matches the
location.
function Navbar() {
return (
<div>
<nav className="navbar">
<div>
<h1 className="nav_text">ExportGrains</h1>
</div>
<ul className="nav_ul">
<Link to="/about">about</Link>
<li id="nav_li">HOME</li>
<li id="nav_li">PRODUCTS</li>
<li id="nav_li">ABOUT</li>
<li id="nav_li">CONTACT</li>
</ul>
</nav>
</div>
);
}
Related
I'm a beginner front-end dev and I try to make an imaginary website. I'm learning to react router now. So when I try to click on the home/about or contact button, It doesn't open it. What am I doing wrong?
here's my code below :
my App code :
import React from 'react';
import './App.css';
import Navibar from './Components/Navibar';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Home from './Components/Home';
import About from './Components/About';
import Contact from './Components/Contact';
let App = () => {
return (
<Router>
<div className="App">
<Navibar/>
<div className="content">
<Switch>
<Route exact path="/">
<Home/>
</Route>
<Route exact path="/About">
<About/>
</Route>
<Route exact path="Contact">
<Contact/>
</Route>
</Switch>
</div>
</div>
</Router>
);
}
export default App;
and here's my navbar code :
import React from 'react';
import {Nav, Navbar, Container} from 'react-bootstrap';
import {Link} from 'react-router-dom';
let Navibar = () => {
return (
<>
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">My Portfolio</Navbar.Brand>
<Nav className="me-auto">
<Link to="/">Home</Link>
<Link to="#about">About me</Link>
<Link to="#contact">Contact</Link>
</Nav>
</Container>
</Navbar>
</>
);
}
export default Navibar;
and here's my Home (the home/about and contact codes are the same) code :
import React from 'react';
let Home = () => {
return (
<>
<h2>Home</h2>
</>
);
}
export default Home;
I need help from a professional, because I'm getting stuck in this :)
The Navibar should link to the route paths you are rendering, not anchor tags (hashes) on the current page. The bootstrap Navbar.Brand component should also render a RRD Link component instead of a plain anchor tag with href attribute.
import React from 'react';
import { Nav, Navbar, Container} from 'react-bootstrap';
import { Link } from 'react-router-dom';
const Navibar = () => {
return (
<>
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand
as={Link} // <-- as a RRD Link component
to="/" // <-- to prop for Link component
>
My Portfolio
</Navbar.Brand>
<Nav className="me-auto">
<Link to="/">Home</Link> // <-- "/"
<Link to="/about">About me</Link> // <-- "/about"
<Link to="/contact">Contact</Link> // <-- "/contact"
</Nav>
</Container>
</Navbar>
</>
);
}
export default Navibar;
The App component should specify route paths that match what the navbar is linking to.
Also the routes App is rendering within the Switch component should be rendered in inverse order of route path specificity. In other words, render the more specific paths prior to the less specific paths. This is to attempt to match and render more specific paths and falling back to less specific paths. This also effectively eliminates the need to use the exact prop.
const App = () => {
return (
<Router>
<div className="App">
<Navibar />
<div className="content">
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/contact">
<Contact />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</div>
</Router>
);
}
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 am trying to make a Navbar but the isn't re-directing to the given page. If I click any of the links in the Navbar, it would change the path in the url bar but won't re-direct to that page. I am not sure if I am missing anything. When I replace it with the tags, it works perfectly.
Navbar.js
import React from "react";
import { BrowserRouter as Router, Link, Switch } from "react-router-dom";
const Navbar = () => {
return (
<Router>
<Switch>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/articles">Articles</Link>
</li>
<li>
<Link to="/articles-all">All articles</Link>
</li>
</ul>
</nav>
</Switch>
</Router>
);
};
export default Navbar;
App.js
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import './App.css'
//pages
import Home from "./Pages/Home";
import About from "./Pages/About";
import Articles from "./Pages/Articles";
import ArticlesList from "./Pages/ArticlesList";
//components
import Navbar from './components/Navbar';
const App = () => {
return (
<div>
<Navbar/>
<Navigation />
</div>
);
};
export default App;
const Navigation = () => {
return (
<Router>
<div id="page-body">
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/articles" component={Articles} />
<Route path="/articles-all" component={ArticlesList} />
</div>
</Router>
);
};
Since you define the Router within Navigation and another one in Navbar your Links are not able to communicate to the Router Component in Navigation as they just communicate to their nearest parent Router component
You must you use a single Router instance to be able to perform seemless navigation within your App. Also a Switch component is not needed with Links but with Route
const App = () => {
return (
<Router>
<Router component={Navbar}/> // rendered as default route so that they receive router props
<Router component={Navigation} />
</Router>
);
};
export default App;
const Navigation = () => {
return (
<div id="page-body">
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/articles" component={Articles} />
<Route path="/articles-all" component={ArticlesList} />
</div>
);
};
const Navbar = () => {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/articles">Articles</Link>
</li>
<li>
<Link to="/articles-all">All articles</Link>
</li>
</ul>
</nav>
);
};
export default Navbar;
Here's a working codesandbox URL https://codesandbox.io/s/frosty-black-3i8hp?file=/src/App.js
You were wrapping links with browserRouter and Switch. These APIs are intended to wrap Routes only.
So, It wasn't able to communicate well with your react app.
new to React Router, my question is how to render a particular component inside other layout which is already rendered (i have two components sidebar and content i just want if i click on any link in sidebar that component will we render in already render Content component not override that)
////////////Sidebar.js////////////
import React from 'react'
import { BrowserRouter, Link } from 'react-router-dom'
import PersonalImg from '../images/personal.gif'
const Sidebar = () => {
return (
<div className="sidebar">
<BrowserRouter>
<div className="personal-img">
<img src={PersonalImg} alt="personl-img" />
</div>
<div className="navigation">
<ul className="list">
<li><Link to="/about">About</Link></li>
<li><Link to="/work">Work</Link></li>
<li><Link to="/skills">Skills</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</div>
</BrowserRouter>
</div>
)
}
export default Sidebar;
Content component...
/////////////////Content.js//////////////////
import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import About from './About'
import Skills from './Skills'
import Work from './Work'
import Contact from './Contact'
const Content = (props) => {
return (
<div className="content">
<BrowserRouter>
<Route path="/" componet={About} />
<Route path="/work" componet={Work} />
<Route path="/contact" componet={Contact} />
<Route path="/skills" componet={Skills} />
</BrowserRouter>
</div>
)
}
export default Content;
and thats how App.js rendering these components
render() {
return (
<Fragment>
<Sidebar />
<Content />
</Fragment>
)
}
Here, I have created small demo for you
https://codesandbox.io/s/naughty-glade-vnj0l
Problem 1: componet spell is wrong. It should be component in the Route.
Problem 2: set exact keyword for the first route like this <Route exact path="/" componet={About} />.
Use single BrowserRouter throughout the application.
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>