Question

实际上，每当有人单击“登录”按钮时，链接都会更改，但该页面上的组件不会呈现

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;

请仔细检查此错误，许多开发人员都面临此问题。

Answer 1

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

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

1 个答案: