react路由重定向 onClick

IT技术 javascript reactjs react-router
2021-05-01 07:48:55

我一直在尝试在单击按钮时对另一个组件进行简单的重定向，但由于某种原因它不起作用。我想重定向到“/仪表板”并从登录显示 AdminServices，如下所示：

//index.js

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, 
    document.getElementById("root"));

//App.js

     <Switch>
          <Route path="/" component={Login} />
          <Route path="/dashboard" component={AdminServices} />
        </Switch>

//登录.js

<Button
onClick={this.login}
>
</Button>

login = () =>{
    <Redirect to="/dashboard" />
  }

//AdminServices.js

render(){
        return(
            <div>Test</div>
        );
    }
4个回答

除了使用 props.history，更好的方法是使用 useHistory 钩子，如下所示：

import { useHistory } from 'react-router-dom'

const MyComponent = (props) => {
  const history = useHistory();

  handleOnSubmit = () => {
    history.push(`/dashboard`);
  };
};

你可以这样按功能路由 

  handleOnSubmit = () => {
  this.props.history.push(`/dashboard`);
  };

希望这有帮助

简单，使用NavLink代替按钮

import { NavLink } from 'react-router-dom'

<NavLink to="/dashboard"> Dashboard </NavLink>

https://reacttraining.com/react-router/web/api/NavLink

<Switch>组件只渲染第一个匹配的路由。您只需要交换<Route>组件<Switch>以防万一并使用@Adnan shahanswer 来制作重定向功能。

PS react-router身份验证示例

其它你可能感兴趣的问题
上一篇热端加热元件的银焊料规格 下一篇我可以期望 FDM 3d 打印机打印多小？