模态内的反应路由器组件不会更新

Question

我正在尝试在 Material-UI 的模式中创建登录和注册页面，当用户单击使用 React Router Switch 时，该页面应该在其中两个组件之间来回切换

但问题是每当我点击一个 . URL 已更改，但我的组件不会更新（它保持相同的旧组件） 下面是我的代码。

import Modal from "@material-ui/core/Modal";
import { Switch, Link, Route, BrowserRouter as Router } from "react-router-dom";


export default function AccountModal() {
    .
    .
    .
    const SignIn = () => {
        return (
            <div className="modal__body">
                <p>Don't have an account? <Link to="/signup">Sign up</Link></p>
            </div>
        );};

    const SignUp = () => {
        return (
            <div className="modal__body">
                <p>Already have an account? <Link to="/">Log inp</Link></p>
            </div>
        );};

return (
    <>
        <Button onClick={() => setOpen(true)} className={classes.button}>Get started!</Button>
        <Modal open={open} onClose={() => setOpen(false)}>
            <Router>
                <div style={modalStyle} className={classes.paper}>
                    <div className="modal__header">
                        <center><img src={logo} alt="Logo"></img></center>
                    </div>

                    <Switch>
                        <Route path="/" component={SignIn} />
                        <Route path="signup" component={SignUp} />
                    </Switch>

                </div>
            </Router>
        </Modal>
    </>
);
}

对于任何令人困惑的英语语言和写作，我深表歉意，我目前正在学习如何使用 React。 先感谢您！

Answer 1

Switch将渲染第一个匹配位置的Route或Redirect ，“/”匹配所有路由。 交换顺序，以便更具体的路径将首先尝试匹配。

<Switch>
  <Route path="/signup" component={SignUp} />
  <Route path="/" component={SignIn} />
</Switch>

或在登录路线上指定exact道具，以便路径必须与“/”完全匹配而不是更多

<Switch>
  <Route exact path="/" component={SignIn} />
  <Route path="/signup" component={SignUp} />
</Switch>