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

debugcn 发表于 Dev

写作开发人员

该网站正在使用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>
  <Route path="/login">
    {/* <SignIn /> */}
  </Route>
  <Route path="/about">
    {/* <About /> */}
  </Route>
  <Route path="/users">
    {/* <Users /> */}
  </Route>
  <Route path="/">
  </Route>
    {/* <Home /> */}
</Switch>

它是这样工作的。

dev_junwen

我不太确定为什么您需要一个开关盒。但是您可以看一下这个简单的例子。你不需要来包装你Button有一个Link，而不是你可以利用component道具Button，以防止不必要的包装为组件。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。