Hey I am a Smart Contract Developer first time using react and when I try to switch pages using Router both pages Data are showing on a single page, I wanna ask is there some way to first load main page and when I click on another button the data of another page show.
App.js:
<Router>
<Link className="btn-success user-btn" to = "/user">User Login</Link>
<Link className="btn-success admin-btn">Admin Login</Link>
<Switch>
<Route path={"/user"} exact>
<User />
</Route>
</Switch>
</Router>
User.js:
import React from 'react';
const User = () =>{
return(
<div>
User Panel
</div>
);
}
export default User;
App Component is the main component in React which acts as a container for all other components. When you put some content in there, it will show up everywhere in your app. You can simply create another component, let's name it Home
Home.js
import React from 'react';
import { Link } from 'react-router-dom';
const Home = () =>{
return(
<div>
<Link className="btn-success user-btn" to = "/user">User Login</Link>
<Link className="btn-success admin-btn">Admin Login</Link>
</div>
);
}
export default Home;
App.js
import User from './User';
import Home from './Home';
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route exact path={"/"} component={Home}></Route>
<Route exact path={"/user"} component={User}></Route>
</Switch>
</Router>
</div>
);
}
export default App;
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>
);
}
Unable to see the header text returned in my Home and Tutorials page in my react hooks site. Below is my App.js, Navigation.js and Home.js. Could someone please advise about the problem here.
App.js
import React from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import './App.css';
import Home from "./components/Home";
import Tutorials from "./components/Tutorials";
import Navigation from './components/Navigation';
function App() {
return (
<BrowserRouter>
<Navigation>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/tutorials" component={Tutorials} />
</Switch>
</Navigation>
</BrowserRouter>
);
};
export default App;
Navigation.js
import React from 'react';
import { NavLink} from 'react-router-dom';
const Navigation = () => {
return (
<div className="App">
<div className="wrapper">
<div id="wrap">
<nav className="siteNavigation_nav_links">
<div className="row" ></div>
<div className="main_links_nav">
<NavLink className="mob_link" to="/">Home</NavLink>
<NavLink className="mob_link" to="/tutorials">Tutorials</NavLink>
</div>
</nav>
</div>
</div>
</div>
)
}
export default Navigation;
Home.js
import React from 'react';
const Home = () =>{
return (
<div className="App">
<h1>This is Home Page !</h1>
</div>
)
}
export default Home;
Tutorials.js
import React from 'react';
const Tutorials = () =>{
return (
<div><h1>This is Tutorials Page !</h1></div>
)
};
export default Tutorials;
Navigation is a Navbar component. And you want it everywhere on the site.
So, you can easily do it by using it outside the scope of the Switch component.
In doing so, it will render all over your screens.
<BrowserRouter>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/tutorials" component={Tutorials} />
</Switch>
</BrowserRouter>
I start learning about React, and I am working in an application in two parts: when the user is logged and is not.
When the user is not logged, the "/" will show the login page. When is logged, will show the Dashboard page. In Dashboard page, there is a top nav and a sidebar in the left, and in the "center" will show the content of the page. Linke in this image from iMaster:
SO the sidebar will have links, that will update the component that is shown as children of the Dashboard component. I searched about "Nested Routes", but no success.
I'm trying to do in this because I see that if I will show the navs in "all" pages, is better load the navs one time and then update the children os the navs, instead of loading the navs in every page.
Anyone can help?
App.js
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Login from './pages/login';
import Dashboard from './pages/dashboard';
const App = () => (
<div className="App">
<BrowserRouter>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/dashboard" component={Dashboard} />
</Switch>
</BrowserRouter>
</div>
);
export default App;
Dashboard
import React, { Component } from 'react';
//BOOTSTRAP
import 'bootstrap/dist/css/bootstrap.min.css';
import { Col, Container, Row } from 'react-bootstrap';
//BOOTSTRAP
import './styles.css';
import TopSideNavBar from '../../components/TopSideNavBar';
export default class Dashboard extends Component {
render() {
return(
<>
<div className="body">
<TopSideNavBar />
<Container fluid className="content">
<Switch>
<Route path={`${match.path}/component1`} render={Component1}/>
<Route path={`${match.path}/component2`} render={Component2}/>
</switch>
</Container>
</div>
</>
);
}
}
Wrap your component with BrowserRouter and correct access to match.path
export default class Dashboard extends Component {
render() {
return (
<BrowserRouter>
<>
<div className="body">
<TopSideNavBar />
<Switch>
<Route path={`${this.props.match.path}/component1`} component={Component1} />
<Route path={`${this.props.match.path}/component2`} component={Component2} />
</Switch>
</div>
</>
</BrowserRouter>
);
}
}
It might sound weird but when i go to inner page from homepage i the hover on link hover effect works fine and goes to innerpage. then in innerpage I have a back button which returns back to Homepage and after coming back to Homepage, when I hover on the link, no Hover effect.
this is how i have called the inner pages, if it helps
import React from 'react';
import { Switch , Route , BrowserRouter } from 'react-router-dom';
import Training from './section/training';
function App() {
return (
<div className="main homepage">
<BrowserRouter>
<div>
<Switch>
<Route path="/training" component={Training} exact={true} />
</Switch>
</div>
</BrowserRouter>
</div>
);
}
export default App;
Update
This is a part of main_content.js in which i have used <Link>
<div className="portfolio-grid-img">
<Link to="/training">
<img src={training_thumb} alt="Training thumbnail" />
<div className="portfolio-grid-overlay">
<h3>Site Revamp</h3>
<p>Training Terminal</p>
</div>
</Link>
</div>
You will need a route to your home page component
import React from 'react';
import { Switch , Route , BrowserRouter } from 'react-router-dom';
import Training from './section/training';
import Home from './homePageContent';
function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/training" component={Training} exact={true} />
</Switch>
</BrowserRouter>
);
}
export default App;
I am trying to navigate to a login page using react router but when the button is clicked, the next page is displayed on the same page without actually navigating to the next page.
Here is my code
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import $ from 'jquery';
import { Login } from './Login';
export class Index extends Component {
render() {
return (
<div>
<div align='center'>
<h3> Project Management System </h3>
</div>
<p>
Here, you can search for the previous B.sc, M.sc and Ph.D projects that have been carried out in the department. <br/><br/>
</p>
<Router>
<div>
<Link to="/login">Continue </Link>
<Route exact path={"/login"} component={Login}/>
</div>
</Router>
</div>
);
}
}
When I click on continue button, it's supposed to show the login page alone, without showing the previous page, but here, it shows both previous page and the login page.
--Edit--
Move your button and info in another Component, call it Home or something similar.
Home.js
import React from "react"
import { Link } from "react-router-dom"
const Home = () => {
return(
<div>
<div style={{textAlign: "center"}}>
<p>Your paragraph</p>
<Link to="/login">Continue </Link>
</div>
</div>
)
}
export default Home
Index.js
now you'll have a cleaner Router
keep all your imports and bring in the Home component
export class Index extends Component {
render() {
return (
<div>
<Router>
<div>
<Switch>
<Route path="/" exact={true} component={Home}>
<Route path="/login" component={Login}/>
</Switch>
</div>
</Router>
</div>
The reason for that behavior is very simple. You wrapped only Login component with the router. You have to create routes with the Switch component to change the views. Here is an example https://codesandbox.io/s/2xqxqpo550