0

I'm having an issue with react router dom, Every time I click the sign in button that should take me to Chat.js but instead it just updates the link not the page.

Here’s my code in App.js

<Router> 
<Route exact path="/" component={Join}/> 
<Route path="/chat" component={Chat}/> 
</Router>

And in Join.js

import React, { useState } from "react";
import {Link} from "react-router-dom"

import "./Join.css"

function Join() {
    const [name, setName] = useState()
    const [room, setRoom] = useState()
    return (
        <div className="joinOuterContainer">
            <div className="joinInnerContainer">
            <h1 className="heading">Join</h1>
                <div><input className="joinInput" type="text" placeholder="Name" onChange={(e) => setName(e.target.value)}/></div>
                <div><input className="joinInput mt-20" type="text" placeholder="Room" onChange={(e) => setRoom(e.target.value)}/></div>
        
                <Link to={`/chat?name=${name}&room=${room}`}>
                    <button type="submit" className="button mt-20">Sign In</button>
                </Link>
            </div>
        </div>
    )
}

export default Join

I thought about adding arrow heads between the components i.e. {<Chat/>} and replacing component with element but it just won't work.. any thoughts on how to fix this?

Note: I'm using react v18 and react-router-dom v5

BASSAM
  • 11
  • 2
  • Please post your complete code. It looks like there's a form involved. Also, calling `preventDefault` on the link event will cancel the navigation action. What are `name` or `room`? https://stackoverflow.com/help/minimal-reproducible-example – Drew Reese Apr 25 '22 at 20:10
  • I posted the complete code. name and room are react hooks. I also tried deleting the whole onClick event. – BASSAM Apr 25 '22 at 20:18
  • I don't see where they are declared, this isn't complete code. Can you share the entire `Join` component code? Can you clarify what "instead it just updates the link not the page" means? – Drew Reese Apr 25 '22 at 20:19
  • When I click the button it should redirect me to Chat.js, But instead it just updates the url. so I have to manually refresh the page so Chat.js can load – BASSAM Apr 25 '22 at 20:26
  • Are you using React 18 and `react-router-dom` v5? Does this answer your question? https://stackoverflow.com/a/71833424/8690857 – Drew Reese Apr 25 '22 at 20:27
  • 1
    It worked! thanks man, All what I had to do is downgrade react to v17. – BASSAM Apr 25 '22 at 20:47

1 Answers1

-2

You should use a higher level router such as BrowserRouter. https://reactrouter.com/docs/en/v6/api#router

Kevin Chinkan
  • 1
  • 1