面试题：React中在路由中条件渲染组件的常见方式

Question

在React路由场景下，假设你有两个组件ComponentA和ComponentB，当用户处于登录状态时显示ComponentA，未登录时显示ComponentB，请描述实现这一条件渲染的常见代码逻辑，并且说明在React Router v5和v6中的实现差异。

Answer 1

常见代码逻辑

1. 定义状态管理：可以使用React的useState钩子来管理登录状态，例如const [isLoggedIn, setIsLoggedIn] = useState(false);。也可以使用更复杂的状态管理工具如Redux、MobX等。
2. 条件渲染：在需要的地方根据isLoggedIn的值进行组件渲染，例如：

import React from'react';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn? <ComponentA /> : <ComponentB />}
    </div>
  );
}

React Router v5 与 v6 实现差异

React Router v5

1. 使用withRouter高阶组件（HOC）：可以将需要进行条件渲染的组件通过withRouter包装，这样组件就能访问到路由相关的属性。

import React from'react';
import { BrowserRouter as Router, Route, Switch } from'react-router-dom';
import { withRouter } from'react-router';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const ConditionalComponent = withRouter(({ location }) => {
    return isLoggedIn? <ComponentA location={location} /> : <ComponentB location={location} />;
  });

  return (
    <Router>
      <Switch>
        <Route path="/" component={ConditionalComponent} />
      </Switch>
    </Router>
  );
}

2. 利用history对象：通过history对象来处理导航逻辑，例如在登录/登出后进行页面跳转。

React Router v6

1. 使用useNavigate钩子：v6中不再使用withRouter，而是通过useNavigate钩子来进行导航。

import React from'react';
import { createBrowserRouter, RouterProvider } from'react-router-dom';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const navigate = useNavigate();

  const handleLogin = () => {
    setIsLoggedIn(true);
    navigate('/');
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
    navigate('/login');
  };

  const router = createBrowserRouter([
    {
      path: "/",
      element: isLoggedIn? <ComponentA /> : <ComponentB />
    }
  ]);

  return (
    <RouterProvider router={router}>
      {/* 其他UI元素，如登录/登出按钮 */}
    </RouterProvider>
  );
}

2. 路由配置变化：v6中使用createBrowserRouter和RouterProvider进行路由配置，element属性直接接收要渲染的组件，而不是像v5使用component属性。同时v6移除了Switch组件，使用Routes代替，并且路由匹配逻辑也有所改变，采用更扁平的配置方式。