React路由重定向

Question

我一直试图做一个简单的重定向到按钮点击的另一个组件，但由于某种原因，它不起作用。我想重定向到/dashboard并从登录显示AdminServices，如下所示：

//索引。js

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

//应用程序。js

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

//登录。js

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

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

//管理服务。js

render(){
        return(
            <div>Test</div>
        );
    }

Answer 1

简单，使用NavLink代替按钮

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

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

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

Answer 2

你可以像这样按函数路由

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

希望这能有所帮助

Answer 3

而不是使用道具。历史，更好的方法是使用useHistory钩子，如下所示：

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

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

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