如何在React中使用useLocation实现路由跳转至新布局？

核心思路：你的现有代码中Header、Sidebar、Footer是全局渲染的，所以只要通过useLocation获取当前路径，判断是否为独立布局对应的路径，按需渲染公共组件即可。

具体实现步骤 #

• 第一步：给侧边栏「main」选项配置路由跳转
  首先在Sidebar组件中，将main选项替换为react-router-dom的Link组件，指定跳转路径为/main（可自定义路径）：

  <Link to="/main">main</Link>
  

• 第二步：调整App组件结构，引入useLocation做路径判断
  因为useLocation只能在Router包裹的子组件中调用，所以我们把原有Router内的逻辑抽为子组件，通过路径判断是否渲染公共布局组件：

  import { useState } from 'react';
  import { BrowserRouter as Router, Switch, Route, useLocation } from 'react-router-dom';
  // 导入你的业务组件
  import Header from './Header';
  import Sidebar from './Sidebar';
  import Footer from './Footer';
  import Overview from './Overview';
  // 导入你要的独立布局对应的页面组件
  import MainPage from './MainPage';
  
  function AppContent() {
    const [open, setOpen] = useState(true);
    // 获取当前路由路径
    const location = useLocation();
    // 判断当前是否为独立布局路径，若有子路由可改为 location.pathname.startsWith('/main')
    const isIndependentLayout = location.pathname === '/main';
  
    return (
      <div className="app">
        {/* 非独立布局时渲染原有公共头部、侧边栏 */}
        {!isIndependentLayout && (
          <>
            <Header open={open} setOpen={setOpen} />
            <Sidebar open={open} setOpen={setOpen} />
          </>
        )}
  
        <Switch>
          <Route exact path="/" component={Overview} />
          <Route exact path="/overview" component={Overview} />
          {/* 新增独立布局路由 */}
          <Route exact path="/main" component={MainPage} />
        </Switch>
  
        {/* 非独立布局时渲染原有底部 */}
        {!isIndependentLayout && <Footer />}
      </div>
    );
  }
  
  function App() {
    return (
      <Router>
        <AppContent />
      </Router>
    );
  }
  
  export default App;
  

补充说明 #

• 如果独立布局下有多个子路由，只需要把路径判断逻辑改为location.pathname.startsWith('/main')，所有/main开头的路径都会使用独立布局
• 也可以用嵌套路由实现：把需要公共布局的路由都归到一个父路由下，父路由渲染公共组件，子路由渲染页面内容，独立布局的路由和父路由平级即可，不需要额外的路径判断。

内容的提问来源于stack exchange，提问作者Tony