I am new to react,
I want to connect the button on the main page with a separate react page. Here I want to connect the contact link href directing to the contact react page.
import React from 'react';
(function Nav (){
return(
<div id="navid">
<nav className="navbar fixed-top navbar-expand-lg">
<a className="navbar-brand" href="home">Manav</a>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<a className="nav-link" href="./Contact">Colab</a>
</li>
<li className="nav-item">
<a className="nav-link" href="x">Blogs</a>
</li>
</ul>
</div>
</nav>
</div>
);
}
export default Nav;
Since React apps are usually SPA's (Single Page Application) that means that usually there is just one html page and react will handle the content switching on the page. So using <a> tags will not work since it expects a separate HTML page to exist which does not exist.
The correct way is to use a routing library like react-router and use its Link component to handle the routing or switching the pages.
You have to use react-router-dom npm package to perform routing operations in react.
npm install react-router react-router-domimport { Switch, Route, BrowserRouter } from "react-router-dom" in your App.js file.<BrowserRouter> <Switch> <Route> tags as shown below:import Blogs from "./Components/Blogs";
import Colab from "./Components/Colab";
import Nav from "./Pages/Nav";
import { Switch, Route, BrowserRouter } from "react-router-dom";
const App = () => {
return (
<div className="App">
<BrowserRouter>
<Nav />
<Switch>
<Route path="/BLog">
<Blog />
</Route>
<Route path="/Colab">
<Colab />
</Route>
</Switch>
</BrowserRouter>
</div>
);
};
export default App;App.js go to your Nav.jsimport {Link} from "react-router-dom" in Nav.js and set the Links to the path as shown below:import React from "react";
import { Link } from "react-router-dom";
const Nav = () => {
return (
<div>
<Link to="Blog" style={linkStyle}>
Blog
</Link>
<Link to="Colab" style={linkStyle}>
Colab
</Link>
</div>
);
};
export default Nav;Yo dont need to use <a className="nav-link" href="x">Blogs</a> instead we use Link and Route. You can get more information from the documentation of react-Route-dom