简述React-Router怎么设置重定向?
在React Router中,我们可以使用<Redirect>
组件进行重定向。<Redirect>
组件可以接受两个重要的props:from
和to
,分别用于指定要重定向的来源路径和目标路径。
这里是一个简单的例子,它将从”/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”。