How to link Button to another page in react JS?

Question

Hi guys so I'm trying to use button in my react-bootstrap app and what that button do is everytime user click the button it will redirect the user to another page of the web-app. But for some reason it didn't work, can anyone help me please ? my router already work for other components such as header, footer, etc. But it didn't work for the Button.

Here's my code:

            <Container fluid>
                <Row className="Aboutus">
                    <Col sm={12} lg={6}>
                        <h1>About Us</h1>
                        <hr style={{border:'2px solid', color:'#10255A', width:'25.7%'}}></hr>
                        <p>The hotel itself possess a trendy design with attention to comfort, 
                           quality and value based accommodation.
                        </p>
                        <button as={Link} to={"/Room"}>See Room</button>
                    </Col>
                    <Col sm={12} lg={6}>
                        <img src="#"></img>
                    </Col>
                </Row>
            </Container>

Ryan Le · Accepted Answer · 2021-09-13 04:50:49Z

1

You would need to use bootstrap <Button> instead of native HTML <button> for that and change href instead of to:

<Button as={Link} href={"/Room"}>
  See Room
</Button>;

Live Example:

You will need to open sandbox URL in another tab to see url change

answered Sep 13, 2021 at 4:50

Ryan Le

8,5201 gold badge18 silver badges27 bronze badges

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

5 Comments

Kim San Over a year ago

Hi thanks for your help. If I use this method can I change the style of my button to my preference ? how can I do it in my css ?

Ryan Le Over a year ago

You surely can, you can use className or styles object to the Button itself to style your button just like a native HTML button

Ryan Le Over a year ago

I updated some styles for the button inside the codesanbox, you can check it there for better understanding. I used both className and styles object.

Kim San Over a year ago

Hi, I tried it already but it didn't work, when I try to inspect the element the button contains the "btn btn-primary" even though I didn't write it on my class. How can I remove it ?

Ryan Le Over a year ago

It's a predefined class when you use the Button component from bootstrap. If you don't want to use it, then pick a few other classes from here

Viet · Accepted Answer · 2021-09-13 04:49:33Z

0

Because you are using normal button, not Button in react-bootstrap.

Just update it

<Button as={Link} to={"/Room"}>See Room</Button>

answered Sep 13, 2021 at 4:49

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Comments

jean182 · Accepted Answer · 2021-09-13 05:04:41Z

0

Another option and just to take advantage of the native link component without using the Button component, is to use the bootstrap classes(which support styling a tags as a button):

<Link to="/Room" className="btn btn-primary">
 See Room
</Link>

answered Sep 13, 2021 at 5:04

jean182

3,5332 gold badges21 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to link Button to another page in react JS?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related