无法在链接更改时呈现新组件

实际上，只要有人单击登录按钮，链接就会更改，但该页面上的组件不会呈现

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;

请查看许多开发人员面临的此错误。

在Join组件中，无需将Link包装在BrowserRouter中。查看工作演示here。