简述React-Router怎么设置重定向?

在React Router中,我们可以使用<Redirect>组件进行重定向。<Redirect>组件可以接受两个重要的props:fromto,分别用于指定要重定向的来源路径和目标路径。

这里是一个简单的例子,它将从”/old-path”重定向到”/new-path”:

import { Route, Redirect } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Route exact path="/old-path">
        <Redirect to="/new-path" />
      </Route>
      <Route path="/new-path">
        <NewComponent />
      </Route>
    </div>
  );
}

在这个例子中,当用户尝试访问”/old-path”时,他们会被重定向到”/new-path”并看到<NewComponent />

另外,我们也可以在代码中动态地进行重定向。例如,如果在某些条件下,我们希望用户被重定向到一个新的页面,我们可以使用history.push方法:

function SomeComponent({ history }) {
  const handleClick = () => {
    // some condition
    if (true) {
      history.push('/new-path');
    }
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

在这个例子中,当用户点击按钮并满足某些条件时,他们会被重定向到”/new-path”。

发表评论

后才能评论