How to link two separate pages in React?

Question

I have two pages Sign Up and Sign In within a folder named components and I am trying to link sign up page with sign in page using <Link>. But it's giving some error.

components/ SignUp.js

<div className = 'spacing'>Already have an account?&nbsp;<span className = 'highlight'><Link to = {'/SignIn'}>Sign In</Link></span></div>

components/ SignIn.js

import React, { Component } from 'react'
import './SignInStyleSheet.css'

class SignIn extends Component {
       render() {
       return (
            <React.Fragment>
            {/* for pop-up  success */}
            <div class = "pop-up-success">
                <h3> Login Successful.</h3>
            </div>
            {/* for pop-up  error */}
            <div class = "pop-up-error">
                <h3> Incorrect Username/ Password.</h3>
            </div>
            <div class = 'container'>
                {/* for form box */}
                <div class =' window'>
                    <div class = 'bold-line'></div>
                    <div class = 'overlay'></div>
                    <div class = 'content'>
                        <div class = 'welcome'>Welcome Again!</div>
                        <div class = 'subtitle'>Thank you to step forwaerd to save water.</div>
                        <form class = "input-fields">
                            <input type = 'email' placeholder = 'Email' class = 'input-line full-width' value = "" name = "useremail" id = "email" required></input>
                            <input type = 'text' placeholder = 'Street' class = 'input-line full-width' required></input>
                            <input type = 'text' placeholder = 'City' class = 'input-line full-width' required></input>
                            <select id = "select_opt" class = 'input-line full-width' required></select>
                            <input type = 'password' placeholder = 'Password' class = 'input-line full-width' value = "" name = "userpasswd" id = "password" required></input>
                        </form>
                        <div class = 'spacing'>Forgot Password?&nbsp;<span class = 'highlight'><a href = "#">Click Here</a></span></div>
                        <div><button id = 'loginBtn' class = 'ghost-round full-width' type = "button">Log In</button></div>
                        <div class = 'spacing'>New User?&nbsp;<span class = 'highlight'><a href = "sign-up.html">Sign Up</a></span></div>
                    </div>
                </div>
            </div>   
        </React.Fragment>
    )
}
}
export default SignIn

error:

Error: Invariant failed: You should not use <Link> outside a <Router>

score 0 · Answer 1 · answered Nov 09 '20 at 05:53

0

The best way to manage navigation between pages of your react app is with a react Router - the router manages the routes (i.e. URLs linked to pages in your app) that are available in your app.

Take a look at this for an introduction to React Router: https://www.freecodecamp.org/news/react-router-in-5-minutes/

Or another good intro: https://www.newline.co/@andreeamaco/how-to-handle-navigation-in-your-app-with-react-router-link--088f82d3

answered Nov 09 '20 at 05:53

James Mc

549
6
10

But this is for single page application. What if I want multiple pages application? – DigiLeon Nov 09 '20 at 08:11
@UtsavAkashNaskar - Yes, this will work with a multi-page React.js application too. – James Mc Nov 09 '20 at 23:09

score 0 · Accepted Answer · answered Nov 09 '20 at 06:24

Install react-router-dom using the following command

npm install --save react-router-dom

create a new file (MainRouter) in your project directory

import { BrowserRouter, Route, Link } from "react-router-dom"; //import the package
import SignIn from "../SignIn" //import your signIn page
import SignUp from "../SignUp" //import your signUp page

function MainRouter(){
    return(
        <BrowserRouter>
            <div className="container">
                <Switch>
                    <Route path="/signIn" component={SignIn} />
                    <Route path="/signUp" component={SignUP} />
                </Switch>
            </div>
       </BrowserRouter>

    )
}
export default MainRouter

Why you need this

react-router-dom package allows you to dynamically navigate the pages in your browser(client side) without refreshing the page,it a nice way to handle navigation in single page application

In term of react system pages means component and react is single page application framework so you can use the above code without any hesitation — mirsahib, Nov 10 '20 at 03:48

How to link two separate pages in React?

2 Answers2