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

Question

I'm trying to create sign-in and sign-up page inside a modal from Material-UI which should be switch back and forth between two of these components when the user clicks the using React Router Switch

But the problem is whenever I clicked a . The URL is changed, but my component won't be updated (It stays the same old component) Here's my code below.

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>
    </>
);
}

I apologize for any confusing English language and the writing, I'm currently learning how to use React. Thank you in advance!

Answer 1

Switch will render the first Route or Redirect that matches location, "/" matches all routes. Swap the order so the more specific path will try to be matched first.

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

or specify the exact prop on the sign in route so the path has to exactly match "/" and no more

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