React Routing Using JS
What is Routing?​
In React, routing is used to switch between different components or views.
Implementing Basic Routing​
There are two ways to implement Routing using core JavaScript.​
- Using if else .
- Using switch case statement .
1 Using if else​
The window.location.pathname
Property​
The window.location.pathname
is a property of the window
object that contains the current URL path. This path is everything in the URL after the domain name (e.g., /about
, /contact
, or /
). Here's how you can use it:
const path = window.location.pathname;
Now, the path
variable will hold the current URL path as a string.
The code example you provided demonstrates how to implement basic routing in React using window.location.pathname
. Let's break it down step by step:
Using if else conditionals.​
import ReactDOM from "react-dom/client";
import About from "./views/About/About";
import Contact from "./views/Contact/Contact";
import Home from "./views/Home/Home";
function App() {
const path = window.location.pathname;
if (path == "/") {
root.render(<Home />);
} else if (path == "/contact") {
root.render(<Contact />);
} else if (path == "/about") {
root.render(<About />);
} else {
root.render(<h1>404 Not Found </h1>);
}
}
Using switch case statement.​
import ReactDOM from "react-dom/client";
import About from "./views/About/About";
import Contact from "./views/Contact/Contact";
import Home from "./views/Home/Home";
function App() {
const path = window.location.pathname;
switch (path) {
case "/":
return <Home />;
case "/about":
return <About />;
case "/contact":
return <Contact />;
default:
return <h1>404 Page Not Found</h1>;
}
}
- Import necessary libraries and components.
- Define a
path
variable to store the current URL path usingwindow.location.pathname
. - Use a
switch
statement to conditionally render different components based on thepath
.
- If the path is
/
, it renders theHome
component. - If the path is
/about
, it renders theAbout
component. - If the path is
/contact
, it renders theContact
component. - If none of the above cases match, it renders an error message.
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<>
{" "}
<App />{" "}
</>
);
Finally, the ReactDOM.createRoot
method is used to create a root for rendering, and root.render
is used to render the App
component into the HTML element with the ID root
.
Using the above method, you can implement basic routing in React.
For production applications, it is recommended to use a routing library like React Router instead of implementing routing manually. We will cover React Router in the next section.