反应路由重定向 onClick

Posted 2023-02-21

【中文标题】反应路由重定向 onClick

【英文标题】：React Routing Redirect onClick

【发布时间】：2018-12-25 20:24:48

【问题描述】：

我一直在尝试在单击按钮时简单地重定向到另一个组件，但由于某种原因它不起作用。我想重定向到“/dashboard”并从登录中显示 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>
        );
    

【参考方案1】：

在 react-router-dom v6 中，您可以使用 useNavigate()，如回答 here。

import  useNavigate  from 'react-router-dom';

const navigate = useNavigate();
navigate('/dashboard');

如果您仍在使用以前的版本，您可以使用useHistory，正如Tellisense 提到的那样。

import  useHistory  from 'react-router-dom';

const navigate = useHistory();
useHistory.push('/dashboard');

【参考方案2】：

使用 a 标签

<a href="/" />

【参考方案3】：

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

import  useHistory  from 'react-router-dom'

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

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

【讨论】：

它与 React 16.4 兼容吗？

【参考方案4】：

我错过了将组件导入到 route.js 文件时发生这种情况。

您需要将组件中的文件引用/导入到路由文件中。

【参考方案5】：

<Switch> 组件只渲染第一个匹配的路由。您只需要在<Switch> 情况下交换您的<Route> 组件并使用@Adnan shah 答案即可实现重定向功能。

附言 react router auth example

【讨论】：

所以我应该完全摆脱 吗？你是对的，它只路由到第一个组件。现在我试图从“/dashbaord”转到“/addservice”，它不起作用：/我要完全删除它吗？

【参考方案6】：

你可以像这样按功能路由

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

希望有帮助

【讨论】：

已经尝试过了，但它仍然不会显示我的其他组件。 Link 也给它一个奇怪的下划线，以后必须处理。我怎样才能只使用一个函数来重定向？ :)

我认为这应该会有所帮助

【参考方案7】：

简单，用NavLink代替按钮

import  NavLink  from 'react-router-dom'

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

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

【讨论】：

我特别想使用按钮，因为我使用材料设计及其在卡片内。在这种情况下，最好使用一个按钮..

嘿@YashankVarshney 你可以使用history.push ***.com/a/45263164/4089357 reacttraining.com/react-router/core/api/history

当然，我在网上看到重定向或链接是比推送更好的选择？无论如何，我确实尝试过放置 NavLink，现在它确实将我带到了正确的 url，但由于某种原因，它仍然显示相同的组件，而不是另一个：/

嗯，不确定，您可以尝试在路由中使用exact，即<Route path="/" exact component=Login />

nvm，我想我只需要使用“确切”路径来摆脱其他组件。现在工作正常！