Question

我一直试图在单击按钮时进行简单的重定向到另一个组件，但是由于某些原因，它不起作用。我到处都看过类似的问题，但这似乎令人困惑。在Angular中进行路由要平滑得多，但是有人可以告诉我我做错了什么吗？我想重定向到'/ 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>

// Login.js

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

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

// AdminServices.js

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

Answer 1

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

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

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

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

Answer 2

简单，使用NavLink代替按钮

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

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

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

Answer 3

您可以像这样通过功能进行路由

Sub Test
  Debug.Print InSheet.Name
End Sub

希望获得帮助

Answer 4

<Switch>组件仅呈现匹配的第一条路线。您只需要在<Route>情况下交换<Switch>组件，并使用@Adnan shah答案来使重定向功能。

P.S react router auth example

Answer 5

一旦我错过了将组件导入到route.js文件的操作，这件事就发生了。

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

Answer 6

使用 a 标签

<a href="/" />

反应路由重定向onClick

6 个答案: