How to link different react pages?

Question

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;

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community
– Community Bot, Commented Sep 9, 2021 at 7:52

Ashley Fernandes · Accepted Answer · 2021-09-05 09:09:51Z

1

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.

answered Sep 5, 2021 at 9:09

Ashley Fernandes

1,20711 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ashley Fernandes Over a year ago

youtu.be/aZGzwEjZrXc youtube video to help you get started

saravana kumar · Accepted Answer · 2021-09-05 09:09:14Z

0

You have to use react-router-dom npm package to perform routing operations in react.

answered Sep 5, 2021 at 9:09

saravana kumar

11 bronze badge

Comments

Syed Muhammad Moiz · Accepted Answer · 2021-09-05 09:43:38Z

First you have to install npm install react-router react-router-dom
Now import import { Switch, Route, BrowserRouter } from "react-router-dom" in your App.js file.
Now use <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;

after setting up Routes of components in App.js go to your Nav.js
import {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

Collectives™ on Stack Overflow

How to link different react pages?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related