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

Question

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>
    )
}

Does this answer your question? [How to navigate on path by button click in react router v4?](https://stackoverflow.com/questions/44877821/how-to-navigate-on-path-by-button-click-in-react-router-v4) — Sunil Chaudhary, Dec 28 '19 at 06:00

score 1 · Accepted Answer · answered Dec 28 '19 at 06:36

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.

laserany · Answer 2 · 2019-12-28T06:26:47.207

0

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

edited Dec 28 '19 at 06:26

answered Dec 28 '19 at 06:20

laserany

716
1
3
13

Baldráni · Answer 3 · 2019-12-28T06:44:33.220

0

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>

edited Dec 28 '19 at 06:44

answered Dec 28 '19 at 06:32

Baldráni

4,066
3
41
63

Hi @Baldrani in Output I have to see only Home Component. If I click the button then only I want to see Contact Component. In Navbar I don't want to see Home and Contact Components. – Dec 28 '19 at 06:36
Ho okay I understood, I've edited my answer @William – Baldráni Dec 28 '19 at 06:44

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

3 Answers3