反应路由重定向 onClick

Question

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

Answer 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');

Answer 2

使用 a 标签

<a href="/" />

Answer 3

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

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

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

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

Answer 4

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

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

Answer 5

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

附言 react router auth example

Answer 6

你可以像这样按功能路由

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

希望有帮助

Answer 7

简单，用NavLink代替按钮

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

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

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