I am new to React and am trying to learn to use React-Router v5. For some reason, my components will not render through the router. Once in my App.js file, I manually rendered my Login.js from there and when I would press buttons within Login.js, router would not change components but it would change the url. I have looked far and wide and I can't seem to find a fix, I feel like it is something simple I overlooked. Here is my code.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App.js'
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
),
document.getElementById('root')
);
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import '../index.css';
import routes from '../routes.js';
class App extends React.Component {
render() {
return (
<div className="HomeNavBar">
<routes />
</div>
);
}
}
export default App
Routes.js
import React from 'react';
import { Switch, Route, Router, withRouter } from 'react-router-dom';
/**
* Import all page components here
*/
import App from './components/App';
import Login from './components/Login.js';
import Register from './components/Register.js';
/**
* All routes go here.
* Don't forget to import the components above after adding new route.
*/
export default function routes(props) {
return (
<Switch>
<Route path='/Login' component={withRouter(Login)}/>
<Route path='/Register' component={withRouter(Register)}/>
<Route exact path='/' component={withRouter(Login)}/>
</Switch>
);
}
Login.js
import React from 'react';
import ReactDOM from 'react-dom';
import '../index.css';
import { Link, withRouter, Router } from 'react-router-dom'
class Login extends React.Component{
render() {
return (
<div>
<div class = "topnav">
<Link to="/">
<button class="HomeButton" id="b" href="#home">CollectR</button>
</Link>
<Link to="/Register">
<button id="a">SignUp</button>
</Link>
<Link to="/Login">
<button id="a" href="#Login">Login</button>
</Link>
</div>
<div id="logo">CollectR</div>
<div>
<form id="loginform">
<label id="loginregistertext">Email</label>
<input type="text" id="logintextbox" />
<label id="loginregistertext">Password</label>
<input type="Password" id="logintextbox" />
<button id="button">Login </button>
</form>
</div>
</div>
)
}
}
export default withRouter(Login)
You need like this (taken from react-router-dom documentation):
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
Related
I'm trying to create my first website, but having issues with redirection to another page. I added Routes to App.jsx, and added links to Navbar; clicking on "Services" in Navbar goes to "/services", but the page doesn't show anything, only Navbar.
I also tried with NavLink, but it did't change anything. Please help me figure out what the problem is.
import React from 'react';
import "./App.css";
import { BrowserRouter, Routes,Route } from "react-router-dom";
import Home from './pages/home/Home';
import Samples from './pages/samples/Samples';
import Services from './pages/services/Services';
import Navbar from './components/navbar/Navbar';
import Reviews from './components/reviews/Reviews';
import Contacts from './components/contacts/Contacts';
const App = () => {
return (
<div>
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/services" element={<Services />} />
<Route path="/samples" element={<Samples />} />
{/* <Route path="#reviews" element={<Reviews />} /> */}
</Routes>
</BrowserRouter>
</div>
)
}
export default App
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { RiMenuFill, RiCloseLine } from 'react-icons/ri';
import './navbar.css';
import MainLogo from "../../assets/MainLogo.png";
const Navbar = () => {
const [toggleMenu, setToggleMenu] = useState(false);
return (
<div>
<div className='navbar'>
<Link style={{textDecoration:"none"}} to="/">
<img src={MainLogo} alt="main_logo" className="navbar_logo"/>
</Link>
<ul className='navbar_links'>
<li>
<Link to="/services">Services</Link>
</li>
<li>
<Link to="/samples">Samples</Link>
</li>
<li>
<Link to="/">Reviews</Link>
</li>
<li>
<Link to="#gallery">Gallery</Link>
</li>
<li>
<Link to="#about">About Us</Link>
</li>
<li>
<Link to="#contacts">Contacts</Link>
</li>
</ul>
</div>
There is no issue with the routing. The issue here is that the navbar uses fixed positioning and the "/services" route content is rendered under the navbar.
Give the App component some top margin to push the content down below the navbar.
Example:
const App = () => {
return (
<div className='app'> // <-- app container
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/services" element={<Services />} />
<Route path="/samples" element={<Samples />} />
{/* <Route path="#reviews" element={<Reviews />} /> */}
</Routes>
{/* <Reviews /> */}
</BrowserRouter>
</div>
)
}
app.css
.app {
margin-top: 93px; // <-- header/navbar height
}
I added {BrowserRouter} to index.js, and it worked
import React from "react";
import ReactDOM from "react-dom";
import App from './App';
import './index.css';
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
)
App.js
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./Home";
import Header from "./Header";
function App() {
return (
<div className="app">
<Router>
<Switch>
<Route path="/checkout">
<h1>Checkout</h1>
</Route>
<Route path="/login">
<h1>Login page</h1>
</Route>
<Route path="/">
<Header/>
<Home/>
<h1>Home page</h1>
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
Header.js
import React from "react";
import "./Header.css";
import SearchIcon from "#material-ui/icons/Search";
import ShoppingBasketIcon from "#material-ui/icons/ShoppingBasket";
import { Link } from 'react-router-dom';
function Header() {
return (
<div className="header">
<img className="header__logo" src="https://i.pinimg.com/736x/35/ca/74/35ca74aa0f5cbb599b83c02bf48499b5--design-logo-handicraft.jpg"/>
<div className="header__optionBasket">
<ShoppingBasketIcon />
<span className="header__optionLineTwo header__basketCount">
0
</span>
</div>
</div>
</div>
);
}
export default Header;
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
I tried to add Header and Home component in App.js and was expecting the stuffs which I added, but it is showing blank on the home page. In contrast, login page shows texts -"login". Where did I go wrong, I have been searching the same but cannot find any answer anywhere. My react router version is 5.2.0
I'm not that familiar with react-router, but It seems you are returning 3 components under 1 Route tag
So maybe put Header, Home and h1 in a div:
<Route>
<div>
<Header />
<Home />
<h1></h1>
</div>
</Route>
I have an app that successfully routes the url, but for some reason the pages aren't displaying under the header. I've looked at the other questions and available resources, but I'm very stuck in figuring out what I'm doing wrong. I am using react-router-dom 6.3.0
Here are my files for reference:
Index.js:
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Router>
<App />
</Router>
);
App.js:
import "./App.css";
import { Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Home from "./pages/Home";
import Freshman from "./pages/Freshman";
import Sophomore from "./pages/Sophomore";
import Junior from "./pages/Junior";
import Senior from "./pages/Senior";
function App() {
return (
<div className='app'>
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="freshman" element={<Freshman />} />
<Route path="sophomore" element={<Sophomore />} />
<Route path="junior" element={<Junior />} />
<Route path="senior" element={<Senior />} />
</Routes>
</div>
);
}
export default App;
Header.js:
import React from "react";
import { Link } from "react-router-dom";
import "./Header.css";
function Header() {
return (
<div className="header-container">
<Link to="/" className="header-title">
College
</Link>
<nav>
<Link to="freshman" className="nav-item">
Freshman
</Link>
<Link to="sophomore" className="nav-item">
Sophomore
</Link>
<Link to="junior" className="nav-item">
Junior
</Link>
<Link to="senior" className="nav-item">
Senior
</Link>
</nav>
</div>
);
}
export default Header;
Home.js:
import React from "react";
function Home() {
return (
<div>
<h1>home</h1>
</div>
);
}
export default Home;
All of the pages are just an tag with their title in black font. However, like I said, none of the pages are displaying even though the url is correctly routed. Any help would be much appreciated!
Your code seems right!
May be try adding a " / " before every routes.
Reply if you're seeing white screen in preview...
You need an <Outlet /> element to render the routes. Based on your code, it looks like this should be in the return statement of Home.js:
import React from "react";
function Home() {
return (
<div>
<h1>home</h1>
<Outlet />
</div>
);
}
export default Home;
This will render the freshman, softmore, junior, senior components as subcomponents of Home, depending on which route is selected.
You can read the documentation for <Outlet /> here: https://reactrouter.com/docs/en/v6/components/outlet
Here is the code:
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Navbar from "./components/navbar/navbar";
import Intro from "./components/intro/intro";
import Services from "./components/services/services";
import Experience from "./components/experience/experience";
import TrelloClone from "./pages/TrelloClone/TrelloClone";
import './App.css'
function App() {
return (
<div className="App">
<BrowserRouter>
<Navbar />
<Routes>
{/* <Route path="/vanillajs" element={SpotifyClone} />
<Route path="/djangoapi" element={InstagramClone} /> */}
<Route path="/reactjs" element={<TrelloClone />} />
</Routes>
</BrowserRouter>
<Intro />
<Services />
<Experience />
</div>
);
}
export default App;
So basically I need to hide(or remove) <Intro />, <Services /> and <Experience /> by clicking the link that leads to '/reactjs' path but leave the <Navbar /> on the page.
edit: grammar and clarifications
install this history from this link, when your package is installed successfully, create a file history.js and put the below code in this file.
import {createBrowserHistory} from 'history';
export default createBrowserHistory();
import the history file in this file like import history from './history', then you will get the history props and you can console the history props and check which props are coming and you will find pathname in the history props and make a condition and as you can see in the code below.
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import history from './history'
import Navbar from "./components/navbar/navbar";
import Intro from "./components/intro/intro";
import Services from "./components/services/services";
import Experience from "./components/experience/experience";
import TrelloClone from "./pages/TrelloClone/TrelloClone";
import './App.css'
function App() {
return (
<div className="App">
<BrowserRouter>
<Navbar />
<Routes>
{/* <Route path="/vanillajs" element={SpotifyClone} />
<Route path="/djangoapi" element={InstagramClone} /> */}
<Route path="/reactjs" element={<TrelloClone />} />
</Routes>
</BrowserRouter>
{history?.location?.pathname !== '/reactjs' &&
<>
<Intro />
<Services />
<Experience />
</>
}
</div>
);
}
export default App;
I am just stuck on this router concept. I am pretty new to react. SO I think we also have a better way of doing so. Correct me if I am doing these things wrong or if we have a better option.
This is my App.js
import React from 'react';
import './App.css';
import Header from './Header';
import Profile from './Profile';
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import PullRequests from './PullRequests';
import Overview from "./Overview";
import Repo from './Repo';
function App() {
return (
<Router>
<div className="App">
<Header />
<Switch>
<Route path="/">
<Profile template= {<Overview/>} />
</Route>
<Route path="/tagname=Repo">
<Profile template= {<Repo/>} />
</Route>
<Route path="/Pullrequests">
<PullRequests />
</Route>
</Switch>
</div>
</Router>
);
}
export default App;
This is my profile.js
import React from 'react'
import "./Profile.css"
import { Avatar} from '#material-ui/core';
import PeopleAltIcon from '#material-ui/icons/PeopleAlt';
import StarBorderIcon from '#material-ui/icons/StarBorder';
import LocationOnIcon from '#material-ui/icons/LocationOn';
import Underlinenav from './Underlinenav';
function Profile({template}) {
return (
<div className="profile">
<div className="profile__left">
<Avatar src="https://avatars0.githubusercontent.com/u/68982304?s=460&u=6b37f00eb36173e0f5f5bc04db9e63066d408d80&v=4" className="profile__avatar"/>
<div className="profile__name">
<span><h4>Shivansh Sharma</h4></span>
<span><p>shivkaansh</p></span>
</div>
<button>Edit profile</button>
<div className="profile_leftFollow">
<div className="profile__options">
<span>< PeopleAltIcon fontSize="small" /></span>
<span>1 follower</span>
</div>
<p>4 following</p>
<div className="profile__options">
<span>< StarBorderIcon fontSize="small"/></span>
<span>3</span>
</div>
</div>
<div className="profile_leftLoc">
<span>< LocationOnIcon fontSize="small" /></span>
<span>India</span>
</div>
</div>
<div className="profile__right">
<div className="profile__rightupper">
<Underlinenav/>
</div>
{template}
</div>
</div>
)
}
export default Profile
I used the prop named template for routing the component in profile.js to toggle between components inside the body. But I think, It is not working as expected,
I want the component of Overview.js on path http://localhost:3000/ and Repo.js on http://localhost:3000/tagname=Repo
Use render attribute and a middleware function to return correct component
<Route
path="/"
render={({location}) => {
const template = checkYourRoute(location) ? Overview : Repo;
return <Profile template={template} />
}
}
>