CODEWITHSUNDEEP
node.jsreactjsroutesreact-routerrouter
AMAN KUMAR
AMAN KUMAR

Reputation: 35

Not Able to render new Component on link change

Actually when ever a person click's on Sign in Button the link change but the component on that page does not renders

App.js

import { BrowserRouter as Switch, Route } from 'react-router-dom';

const App = () => (
  <Switch>
      <Route path="/" exact component={Join} />
      <Route path="/call" exact component={Call} />

  </Switch>
);

export default App;

Join.js


        return (
            <div className="container">
                <div><input id="room" placeholder="room name" onChange={(event)=>setRoom(event.target.value)}></input></div>
                <BrowserRouter>
                <Link onClick={event => (!room) ? event.preventDefault() : null} to={`/call?room=${room}`}>
                  <button className="button mt-20" type="submit" onClick={run}>Sign In</button>
                </Link>
                </BrowserRouter>
            </div>
        );
    }


export default Join;

Call.js


const Call = () => {

        return (
            <div>
                <h1>jhjcjc</h1>
            </div>
        );

}

export default Call;

Please look over this error many developer's are facing this problem.

Upvotes: 0

Views: 35

Answers (1)

Manan Joshi
Manan Joshi

Reputation: 679

In your Join component, there is no need to wrap Link in a BrowserRouter. Check out the working demo here.

Upvotes: 1

Related Questions