代码之家 › 专栏 › 技术社区 › Ludo

每次更改url后,我的整个React应用程序都会刷新,这正常吗?

react-router reactjs

Ludo · 技术社区 · 4 年前

每次更改URL时,我的顶级组件都会刷新(使用React Route v6)。

我没想到,我认为只应该调用新的页面组件,这正常吗?

这是我的顶级React应用程序:

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <ThemeProvider theme={customTheme}>
        <RecoilRoot>
          <App />
        </RecoilRoot>
      </ThemeProvider>
    </BrowserRouter>
  </React.StrictMode>
);

这里是组件(每次使用React Router Link组件更改url时,我都会看到日志):

function App() {
  console.log('REFRESH APP !');
  
  const location = useLocation();
  const isAuthenticated = useRecoilValue(isAuthSelector);

  const routing = useRoutes(routes(isAuthenticated, location));
  
  return (
    <React.Fragment>
      <CssBaseline />
      {routing}
    </React.Fragment>
  )
}

不确定它是否直接相关,但以下是我公开路线的方式:

const routes = (isLoggedIn:boolean, location:LocationState) => {
  const redirectUrl = location?.state?.from?.pathname || "/";

  console.log('REDIRECT URL = ' , redirectUrl)

  return [
    {
      path: '/login',
      element: isLoggedIn ? <Navigate to={redirectUrl} /> : <Login />,
    },
    {
      path: '/register',
      element: isLoggedIn ? <Navigate to={redirectUrl} /> : <Register />,
    },
    {
      path: '/forget-password',
      element: isLoggedIn ? <Navigate to={redirectUrl} /> : <ForgetPassword />,
    },
    {
      path: '/',
      element: isLoggedIn ? <Home /> : <Navigate to="/login" state={{ from: location }}/>,
      children: [
        { path: '/profil', element: <Home /> },
      ],
    },
  ];
}

以下是我如何使用链接组件来更改URL:

import { Link as RouterLink } from "react-router-dom";
import Link from "@mui/material/Link";

<List>
              {
                props.links.map( ({path, label}, index) => 
                  <ListItem key={index}>
                    <Link component={RouterLink} to={path}>{label}</Link>
                  </ListItem>
                )
              }
</List>

0 回复 | 直到 4 年前

Martijn Pieters 4 年前

使用 使用历史记录 挂钩来自 react-router 重定向到路径而不重新呈现页面。如果您正在使用 react-router@6 或更高版本,请使用 使用导航 hook而不是useHistory。

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

这个例子更适合你的情况。

import { useHistory } from "react-router-dom";

let history = useHistory();

const routes = (isLoggedIn:boolean, location:LocationState) => {

    return [
    {
      path: '/login',
      element: isLoggedIn ? history.push(redirectUrl) /> : <Login />,
    },
    {
      path: '/register',
      element: isLoggedIn ? history.push(redirectUrl) : <Register />,
    },
    {
      path: '/forget-password',
      element: isLoggedIn ? history.push(redirectUrl) : <ForgetPassword />,
    },
    {
      path: '/',
      element: isLoggedIn ? <Home /> : history.push("/login"),
      children: [
        { path: '/profil', element: <Home /> },
      ],
    },
  ];
};