React Router v6 在非组件内,实现页面跳转

2022-04-01T07:19:09.114Z阅读150
5

自定义一个custom router

调用createBrowserHistory并导出

import { createBrowserHistory } from 'history'

const history = createBrowserHistory()

export default history

创建custom router

const CustomRouter = ({ history, ...props }) => {
const [state, setState] = useState({
  action: history.action,
  location: history.location
})

useLayoutEffect(() => history.listen(setState), [history])

return (
  <Router
    {...props}
    location={state.location}
    navigationType={state.action}
    navigator={history}
  />
)
}

修改组件内的BrowserRouter


 // <Router history={history}>
    <CustomRouter history={history}>
      <div className="App">
        <AuthProvider>
          {/* <Link to={'/login'}>登陆</Link>
        <Link to={'/home'}>首页</Link> */}
          {/* 配置路由的规则 */}
          <Routes>
            <Route path="/" element={<Navigate to={'/login'} />}></Route>
            <Route
              path="/home"
              element={
                <RequireAuth>
                  <Layout />
                </RequireAuth>
              }
            >
              <Route path="" element={<Home />}></Route>
              <Route path="list" element={<ArticleList />}></Route>
              <Route path="publish" element={<ArticlePublish />}></Route>
            </Route>
            <Route path="/login" element={<Login />}></Route>
            {/* 配置404组件 */}
            <Route path="*" element={<NotFound />}></Route>
          </Routes>
        </AuthProvider>
      </div>
      {/* </Router> */}
    </CustomRouter>

非组件内调用history进行跳转


// 如果token过期
if (err.response.status === 401) {
  // 删除
  // removeToken()
  message.warn('登陆信息过期')

  // 跳转到登陆页面
  // window.location.href = '/login'
  history.push('/')
}
*邮箱为选填, 若输入邮箱,您留言的回复,将在第一时间以邮件的形式通知您。
总共0条留言
No Data