单击带有 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>

[部分带有 React-dom-Router 的 Switch]

<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，而是可以在Button 中使用component 属性来防止对组件进行不必要的包裹。

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