javascript - 使用 reactjs 和 Material UI 单击按钮时更改内容

Question

该网站正在使用 Reactjs 和 Material UI 进行开发。

每次更改地址时，都会使用 Switch 语句输出不同的组件。并且应该使用“链接到”将按钮移动到 URL。

但我不明白，当我按下按钮时，它不会更改为该组件，但是当我按下“抽屉”按钮时，它会更改为该组件。

请问是什么问题。 我认为问题来自以上三个部分。但是完整的工作代码也包含在 CodeSandbox 中 CodeSandbox URL

[switch语句的一部分]

let contentPlace;
let changePage = () =>{
  let location = window.location.pathname;
  console.log(location);
  switch(location){
    case '/':{
      contentPlace=<Home />
      break;
    }
    case '/login':{
      contentPlace=<SignIn/>
      break;
    }
  }
}  

[部分按钮]

<Button variant="outlined" color="inherit" onClick={changePage()}>
  Login
</Button>
</Link>
<Link to="/" className="home">
<Button variant="outlined" color="inherit"  onClick={changePage()}>
  HomE
</Button>

[部分 Switch 与 React-dom-Router]

<Switch>
  <Route path="/login">
    {/* <SignIn /> */}
  </Route>
  <Route path="/about">
    {/* <About /> */}
  </Route>
  <Route path="/users">
    {/* <Users /> */}
  </Route>
  <Route path="/">
  </Route>
    {/* <Home /> */}
</Switch>

它是这样工作的。

Answer 1

我不太清楚你为什么需要一个开关盒。但是你可以看看这个简单的例子。您不需要用 Link 包装您的 Button，而是可以使用 component Button 中的 props 以防止对您的组件进行不必要的包装。

const SignIn = () => (
  <div>
    This is sign in page.
    <Button component={Link} to="/home">
      To Home Page
    </Button>
  </div>
)

const Home = () => (
  <div>
    This is home page.
    <Button component={Link} to="/login">
      To Login Page
    </Button>
  </div>
)

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/login">
          <SignIn />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </BrowserRouter>
  )
}