Hi developer! Welcome to this quick solution. Sometimes, when React developers connect one component to another, a problem occurs. Specifically, when we click on a link to move from one page to another, we might notice %20/ appearing in the URL bar of the browser. This happens every time we click on a link to redirect to another page.
With this solution, we will solve such a problem easily.
Before looking at the solution, let's look at the problem code that a developer provided us.
Problem
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
function Navbar() {
const [click, setClick] = useState(false)
const handleClick = () =>
setClick(false);
return (
<>
<ul className={click ? 'nav-menu active' : "nav-menu"}>
<li><Link to=" / " onClick={handleClick}>Home</Link></li>
<li><Link to=" /about " onClick={handleClick}>About</Link></li>
<li><Link to=" /contact " onClick={handleClick}>Contact</Link></li>
</ul>
</>
)
}
export default Navbar;
In the example above, when we try to go to another page, we see '%20/' at the first of the URL, blocking us from accessing the other page. And every time we click a link, it adds '%20' again to the URL.
If we manually enter the correct URL into the browser's search bar instead of clicking on a link, the webpage loads properly. So, let's explore why this issue is happening and how to fix it.
Salutation
To fix this problem, first of all, check the file where you've used the Link component. Ensure the route is set up correctly within the Link component.
If the page's root (e.g., to="/about") is within the Link component, ensure there are no spaces between double quotes inside the Link tag. Spaces before or after the route (e.g., to=" /about ") can cause navigation issues. Remove any unnecessary spaces to prevent problems with page navigation.
After removing the space around the root, your code should look like this:
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
function Navbar() {
const [click, setClick] = useState(false)
const handleClick = () =>
setClick(false);
return (
<>
<ul className={click ? 'nav-menu active' : "nav-menu"}>
<li><Link to="/" onClick={handleClick}>Home</Link></li>
<li><Link to="/about" onClick={handleClick}>About</Link></li>
<li><Link to="/contact" onClick={handleClick}>Contact</Link></li>
</ul>
</>
)
}
export default Navbar;
In React Router v6, the Switch component has been replaced by the Router component. So, even if you're using Routes instead of Switch, the same issue may occur. In version 6, the URL will display %20/ only once upon repeated clicking of the link, unlike in earlier versions.
To address this issue in React Router v5, we utilized the Switch component in the app.js file. This ensured proper navigation without encountering the %20/ URL problem because we removed the spaces around the root in the Link component.
Here we're using React Router v5, and everything is working smoothly:
import './App.css';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Navbar from './Navbar';
function App() {
return (
<Router>
<Navbar />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/about' exact component={About} />
<Route path='/contact' exact component={Contact} />
</Switch>
</Router>
);
}
export default App;
Why does it happen?
The problem arises due to extra space between double quotes inside the Link tag (to=" /about ") in the first Navbar.jsx file. This space results in %20 being added to the URL, causing navigation issues. In the second Navbar.jsx file, there is no space between double quotes inside the Link tag (to="/about"), therefore, the issue was resolved.
When we're creating a route using any programming language, we must avoid leaving any spaces before or after the double quotes. If there's a space, the browser sees it as part of the URL, causing issues. So, it's crucial to be careful and ensure there are no unnecessary spaces when specifying the page's path.