CODEWITHSUNDEEP
reactjs
user9762889
user9762889

Reputation:

How can I get another component when I click a button?

I am working on react project In this have two components Home and Contact in Home I have button If I click that button I have to go Contact component. But in my Navbar I have only Home component so in output also I have only home page. So If I click the button I need to see Contact Component.

This is Navbar.js 

import React from 'react';
import { Link } from 'react-router-dom';

export default function Navbarcollection() {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <nav className="navbar navbar-expand-lg navbar-light bg-light">
                        <a className="navbar-brand" href="#">Navbar</a>
                        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarNav">
                            <ul className="navbar-nav">
                                <li className="nav-item active">
                                    <Link className='nav-link' to='/'>Home</Link>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    )
}

This is App.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router,Switch,Route } from "react-router-dom";
import Navbar from './Navbar/Navbarcollection';
import Home from './Home/Home';
import Contact from './Contact/Contact';

function App() {

  return (
    <div className="App">
      <Router>
        <Navbar></Navbar>
        <Switch>
          <Route exact path='/'><Home></Home></Route>
          <Route path='/contact'><Contact></Contact></Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

This is Home.js 

import React from 'react'

export default function Home() {
    return (
        <div className='container pt-5 text-center'>
            <button className='btn btn-primary'>Click here</button>
        </div>
    )
}

This is Contact.js

import React from 'react'

export default function Contact() {
    return (
        <div className='pt-5 text-center'>
            <h1>My name is Mark you can call me xxxxxxxxx!</h1>
        </div>
    )
}

Upvotes: 0

Views: 451

Answers (3)

Baldr&#225;ni
Baldr&#225;ni

Reputation: 5640

Have a look at Conditionnal rendering

<div className="collapse navbar-collapse" id="navbarNav">
    <ul className="navbar-nav">
        <li className="nav-item active">
            { if (this.props.location.pathname !== "/") {
                return <Link className='nav-link' to='/'>Home</Link>
            } else { 
                return <Link className='nav-link' to='/contact'>Contact</Link>
                }
            }
        </li>
    </ul>
</div>

Moreover you should probably be using an other syntax to register your routes :

<Switch>
   <Route exact path='/' component="{Home}"/>
   <Route path='/contact' component="{Contact}"/>
</Switch>

Upvotes: 0

Alok Mali
Alok Mali

Reputation: 2881

You are not giving the target path in the button that's why it is not redirecting you anywhere.

Try by replacing your home component with below one.

import React from 'react';
import { Link } from 'react-router-dom';

export default function Home() {
  return (
    <div className='container pt-5 text-center'>
      <Link to='/contact' className='btn btn-primary' >Click here</Link>
    </div>
  ) 
}

Hope this will help you.

Upvotes: 1

laserany
laserany

Reputation: 1451

in your button in your Home.js replace

<button className='btn btn-primary'>Click here</button>

with

<a href='/contact' class='btn btn-primary' role="button">Click here</a>

this is the simplest solution based on the fact you are using bootstrap and routing /contact path to your contact component

Upvotes: 0

Related Questions