Question

我有一个具有onClick功能的按钮，可以使用props重定向到某个组件

<Button
  variant="contained"
  color="primary"
  className={classes.button}
  endIcon={<SendIcon/>}
  onClick={() => {
        <Redirect 
         to={{
          pathname: '/view',
           state: {
            id: row.id
                  }
             }}
          />
         }}
 >
    View History
 </Button>

我的路线代码

<Route exact path="/view"  render={(props) => <NewTestComp {...props}/>} />

按钮没有重定向，我尝试了许多不同的解决方案，但找不到答案

Answer 1

您需要使用history.push重定向到新页面，并且需要渲染Redirect组件才能有效，并且onClick处理程序不会渲染返回的值

<Button
  variant="contained"
  color="primary"
  className={classes.button}
  endIcon={<SendIcon/>}
  onClick={() => {
        props.history.push({
          pathname: '/view',
           state: {
            id: row.id
           }
        });
  }
 >
    View History
 </Button>

Redirect would be to setState和render the component conditionally的使用方式

<Button
  variant="contained"
  color="primary"
  className={classes.button}
  endIcon={<SendIcon/>}
  onClick={() => {
        this.setState({ redirectWithState: {
            id: row.id
        }})
 >
    View History
 </Button>
{ redirectWithState && <Redirect 
         to={{
          pathname: '/view',
           state: redirectWithState
             }}
          />
         }}

材质UI按钮未重定向到路径

1 个答案: