Javascript 使用reactjs&；单击按钮时更改内容；材料界面

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

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

但我不明白，当我按下一个按钮时，它不会变成那个组件，但当我按下“抽屉”按钮时，它会变成那个组件

我想知道是什么问题。 我认为问题来自上述三个部分。但完整的工作代码也在这里与CodeSandbox

[开关语句的一部分]

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>
  <Route path="/login">
    {/* <SignIn /> */}
  </Route>
  <Route path="/about">
    {/* <About /> */}
  </Route>
  <Route path="/users">
    {/* <Users /> */}
  </Route>
  <Route path="/">
  </Route>
    {/* <Home /> */}
</Switch>

let contentPlace；
让changePage=（）=>{
让location=window.location.pathname；
控制台日志（位置）；
开关（位置）{
案例“/”：{
contentPlace=
打破
}
案例“/login”：{
contentPlace=
打破
}
}
}  

[部分按钮]

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>
  <Route path="/login">
    {/* <SignIn /> */}
  </Route>
  <Route path="/about">
    {/* <About /> */}
  </Route>
  <Route path="/users">
    {/* <Users /> */}
  </Route>
  <Route path="/">
  </Route>
    {/* <Home /> */}
</Switch>

登录
家

[带有React dom路由器的交换机的一部分]

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>
  <Route path="/login">
    {/* <SignIn /> */}
  </Route>
  <Route path="/about">
    {/* <About /> */}
  </Route>
  <Route path="/users">
    {/* <Users /> */}
  </Route>
  <Route path="/">
  </Route>
    {/* <Home /> */}
</Switch>

{/*  */}
{/*
我不太清楚您为什么需要一个开关盒。但是您可以看看这个简单的示例。您不需要用
链接来包装
按钮
，而是可以利用
按钮
中的道具来防止对组件进行不必要的包装

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

const SignIn=（）=>(
这是登录页面。
到主页
)
常量Home=（）=>(
这是主页。
登录页面
)
常量应用=（）=>{
返回(
)
}
我认为您应该在
react router dom
中使用
组件，并且您的
onClick={changePage（）}
应该更改为
onClick={changePage}
insteadFYI您的沙盒工作不正常。为什么在节点js中标记此问题？因为我必须将其放在主部分中。在主部分中有contentPlace变量。我认为这可以工作，但不工作。
{（contentPlace=）}{/***/}{（contentPlace=）}{/***/}{（contentPlace=）}
您的意思是
登录
和
主页
都将位于
/
的路径中吗？