Hope you are doing good. I have one question regarding react routing. I have 5 components defined in app.js file after one by one and created route for that as shown in app.js file and created header for that as well as shown in header.js file. But the problem is this when I should click on the 4th component defined in header then focus should come near to 4th component, instead of displaying 4th component below 5th component. for reference I'm giving one website link I want to make routing like this website, if you didn't understand my question.
Refernce Website link
https://www.styleshout.com/templates/preview/Ceevee_2_0_0/
Note: I have completed this issue, for solution please check this link
https://github.com/pajjwal1/Resume
***App.jS***
import './App.css';
import { Route, Switch} from 'react-router-dom'
import Header from './Components/Header/header';
import Home from './Components/Home/home'
import Bg from './Asset/header-bg.jpg'
import About from './Components/About/about'
import Technical from './Components/Technical/technical'
import Project from './Components/Project/project'
import Education from './Components/Education/education'
import Personal from './Components/Personal/personal'
function App() {
return (
<div className="App">
<Header />
<Home background = {Bg}/>
<About />
<Technical />
<Project />
<Education />
<Personal />
<Switch>
<Route path='/home' exact component={Home}></Route>
<Route path='/about' component={About}></Route>
<Route path='/technical' component={Technical}></Route>
<Route path='/project' component={Project}></Route>
<Route path='/education' component={Education}></Route>
<Route path='/personal' component={Personal}></Route>
</Switch>
</div>
);
}
export default App;
***header.js***
import React from 'react';
import '../Header/header.css'
import {NavLink} from 'react-router-dom'
function header(){
return (
<div className="header">
<div className="header_center">
{/* <p>Home</p>
<p>About</p>
<p>Technical Expertiese</p>
<p>Projects</p>
<p>Qualification</p>
<p>Personal Details</p> */}
<NavLink className='nav-item' to='/home'>Home</NavLink>
<NavLink className='nav-item' to='/about'>About</NavLink>
<NavLink className='nav-item' to='/technical'>Technical Expertiese</NavLink>
<NavLink className='nav-item' to='/project'>Projects</NavLink>
<NavLink className='nav-item' to='/education'>Qualification</NavLink>
<NavLink className='nav-item' to='/personal'>Personal Details</NavLink>
</div>
</div>
);
}
export default header;
I see what you want. Do you want to scroll to the component when you click on the nav item of the header?
In this case, you should use a hash router.
Please put id to each component that you want to navigate on the page.
And use # for hash navigate.
For example, if you want to navigate to projects component, use like this.
<Link to="/#projects"> Projects </Link>
And have you wrapped your app component with Router?
import { createBrowserHistory as history } from 'history'
...
<Router history={history()}>
...
<App />
...
</Router>
I hope this helps you to solve your problem.
If it doesn't work for you, please contact me.
I'm sure I can solve this kind of problem.
I will list the things that I updated on your project.
#app.js
Remove Switch wrapper with children
...
{/* <Switch>
<Route path='/home' exact component={Home}></Route>
<Route path='/about' component={About}></Route>
<Route path='/technical' component={Technical}></Route>
<Route path='/#project' component={Project}></Route>
<Route path='/#education' component={Education}></Route>
<Route path='/personal' component={Personal}></Route>
</Switch> */}
...
#header.js
Please use a tag instead of Navlink
<a className='nav-item' href='/#home'>Home</a>
<a className='nav-item' href='/#about'>About</a>
<a className='nav-item' href='/#technical'>Technical Expertiese</a>
<a className='nav-item' href='/#project'>Projects</a>
<a className='nav-item' href='/#education'>Qualification</a>
<a className='nav-item' href='/#personal'>Personal Details</a>
...
And you should put id on every component as like as the project component.
If it doesn't work, please let me know or invite me to your GitHub repo.
Thanks.
Are you going to scroll down to the component when you click the navigation item on header?
For that you can use hash router.
For more detail about that, you can reference this site.
https://paulgrajewski.medium.com/using-context-and-hashrouter-in-react-87afcefc5966
Is it helpful for you?
Related
i am new to react and facing a problem. I have a page which contain two tabs. I want to make a hash URL so that it can redirect to corresponding tabs on the basis of url hash. Similarly when i open the page and change a tab, url also updates. Kindly answer in a detailed way as i am new to this and donot know about professional terms.
Moreover i am also bound to use react router for this.
Note: I am using typescript in case it changes something for my solution.
Thanks in advance.
HashRouter uses a hash symbol in the URL, which has the effect of all subsequent URL path content being ignored in the server request (ie you send "www.mywebsite.com/#/person/id" the server gets "www.mywebsite.com". As a result, the server will return the pre # URL response, and then the post # path will be handled by parsed by your client-side react application.
example code :
import React, { Component } from 'react';
import { HashRouter as Router, Route, Link, Switch }
from 'react-router-dom';
import Home from './component/home';
import About from './component/about';
import Contact from './component/contact';
import './App.css';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<ul className="App-header">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About Us</Link>
</li>
<li>
<Link to="/contact">
Contact Us
</Link>
</li>
</ul>
<Switch>
<Route exact path='/'
component={Home}>
</Route>
<Route exact path='/about'
component={About}>
</Route>
<Route exact path='/contact'
component={Contact}>
</Route>
</Switch>
</div>
</Router>
);
}
}
export default App;
So basically, I have a problem with react router not rendering my SystemSidebar. I want to scroll through my SystemSidebar components, but my problem is when I press on 'LinkSoundIcon' it redirects me to 'a new page' but that page doesnt render my systemSidebar . I want when I press on any of the links of my sidebar that my sidebar remains
import React from 'react'
import './SystemSidebar.css'
import SoundIcon from '#material-ui/icons/Computer';
import ComputerIcon from '#material-ui/icons/Computer';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import Sound from './Sound';
import Computer from './Computer;
const SystemSidebar=()=> {
return (
<div className='system'>
<div className="sidebar">
<Link to='Sound'><VolumeUpIcon /></Link>
<h4> Sound</h4>
<Link to='Computer'><ComputerIcon /></Link>
<h4> Computer</h4>
</div>
</div>
);
};
import React,{Component} from 'react'
import Sound from './Sound';
import Computer from './Computer';
import SystemSidebar from './SystemSidebar';
class MainSystem extends Component {
render(){
return (
<div className="MAIN">
<BrowserRouter>
<SystemSidebar />
<Switch>
<Route exact path="/" component={SystemSidebar} />
<Route exact path="/Sound" component={Sound}/>
<Route exact path="/Computer" component={Computer}/>
</Switch>
</BrowserRouter>
</div>
);
}
}
export default MainSystem;
<Link to='/Sound'><VolumeUpIcon /></Link>
answer of your first problem and second if you want to access sidebar in each component then don't put it in switch route , simply put it outside the routing... or if u want to access it with specific route then try using nested routing
Okay, so it seems a little wonky with your copy pasting (I hope this is just a problem that stems from copy and pasting and it's not like that in your code). But your Problem is here:
<Route exact path="/Sound" component={Sound}/>
You're saying here that the route should be EXACTLY http://<your root uri>/Sound
You should also use this exact route in the link if you want to hit it, this means you need to have the slash there:
<Link to='/Sound'><VolumeUpIcon /></Link>
Update:
So according to your comment you want the sidebar to stay when you click a link. In this case, take a look at your code:
<Switch>
<Route exact path="/" component={SystemSidebar} />
<Route exact path="/Sound" component={Sound}/>
<Route exact path="/Computer" component={Computer}/>
</Switch>
You define here that the component SystemSidebar will only be loaded when you're at the Root directory ("/") of your App. It will be unloaded when you change that directory, for example, to "/Sound". SystemSidebar will be unloaded and Sound will be loaded instead.
Since your Sidebar should always be shown, it needs to be in your Main App and outside of your actual Router logic. Remember what the React Router does: It switches out components depending on which directory (which Sub-URL) you're in. It's best practice to have a Sidebar, an App Bar or similar things that are always there to be their own components. Your actual content should live in a separate container, where the needed component can be swapped out by the Router if need be. So something like this:
class MainSystem extends Component {
render(){
return (
<div className="MAIN">
<SystemSidebar />
<div className="ContentContainer">
<BrowserRouter>
<Switch>
<Route exact path="/Sound" component={Sound}/>
<Route exact path="/Computer" component={Computer}/>
{/* Route "/" should be last because it acts as fallback! */}
<Route exact path="/" component={StartPage} />
</Switch>
</BrowserRouter>
</div>
</div>
);
}
}
That's pretty basic but I hope you get the gist of it.
Also, I'd encourage you to take a look at an UI framework like Material UI for example. It already provides components ready for use (like your Sidebar which is called Drawer there), it's mobile first and easy to use with responsive design.
I`m beginner in React and I want to create page where I include a Navbar and Sidebar and the main to by changed by Sidebar link. How I do that?
exemple:
import Sidebar from '../Sidebar';
import Navbar from '../Navbar;
import {Page1,Page2,Page3} from './menu'
export default function UserPage(){
return(
<>
<Navbar />
<Sidebar />
<div>
//Here i want to component be loaded based on Navlink
</div>
</>
)
}
I found the problem!
If you keep the navbar or sidebar in path="/" don`t use exact in the route because when you will go to "/dashboard" he will not add them
Use a Router
For routing in react you can look up react router here
You then define your routes and that will fill your content based on url.
Example
See how this is like a normal react component, each route will load some specified components. Anything that exists on every page can be put outside of the Switch component. You cna see the Nav bar here that will exist on every page.
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>
);
}
The code below will render a link that I can click on, and when I click on it, I can see the URL changing to have /japanese_game for the URL path. However... nothing appears to change on the page, the link that says "Japanese" is still there, unchanged. It should display the other stuff in <Route path="/japanese_game">, or rather, that's what I would like it to do.
What am I doing wrong?
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import './App.css';
function App() {
return (
<div className="App container">
<Router>
<Switch>
<Route path="/">
<Link to="/japanese_game">
<div className="language-option">
Japanese
日本語
</div>
</Link>
</Route>
<Route path="/japanese_game">
<h1>Japanese Game</h1>
<Link to="/">
Go back
</Link>
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
Change the order, it compares and selects on the basis of which matches first. put the Route with "/japanese_game" first.
The <Switch> component render the first route he match (doc).
When you go to /japanese_game, you also hit / route, so he render the component under the / route.
To prevent that, you have 2 options:
Add an exact props to your route / : <Route exact path="/"> (hightly recommanded)
Change the ordre of your route (not recommanded at all)
Change the order of the routes or alternatively use an "exact" flag.
<Route exact path="/japanese_game">
I am still a newbie to React. So here I am rendering the root component with two routes: Home and About located in functional components: home.js and about.js respectively. However, even after using exact attribute and , the root component keeps on rendering above. I still cannot figure out how to not render the root component when I am redirecting to any of the mentioned routes?
Heres the live demo: https://codesandbox.io/s/vmz6zwq0k7
The Route component is acting like a "placeholder" for the component you want to render when the URL matches. everything above it (parents and siblings) wont get affected.
Given this code example:
render() {
return (
<BrowserRouter>
<div className="App">
<Link to="/home"> Home </Link>{" "}
|
<Link to="/about"> About Us </Link>{" "}
<div>
<Route exact path="/home" component={Home} />
<Route exact path="/about" component={About} />
</div>
</div>
</BrowserRouter>
);
}
This line of code:
<Route exact path="/home" component={Home} />
Is only a "placeholder" for the Home component. It won't render anything only when the path is matching "/home".
When the path will match, the Route component will render the passed component, The Home component in this case.
It will not affect the entire app tree, and for a good reason!
If the entire app would get re-rendered and replaced with the Home component you would loose the navigation links.
I had the same problem looking at the react-routing getting started portion here. https://reactrouter.com/web/guides/quick-start
I placed my Router/BrowserRouter in my App component. Instead place the router in your index.js file like so
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
Then your app component can look like so and the root route wont be matched if about or users is matched.
import React from "react";
import {
Switch,
Route,
Link
} from "react-router-dom";
export default function App() {
return (
<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>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}