React Router配置：如何点击Blog链接打开独立完整页面而非嵌入首页

算力阿峰

2026-10-9

问题原因

你当前的路由配置中，Home、About、Team、Contact等组件没有绑定路由匹配规则，直接挂载在BrowserRouter下，因此无论访问站点的哪个路径，这些组件都会全局渲染。只有Blog组件匹配了/blog路径才渲染，所以会出现在Team组件下方的情况。

修改方案

1. 修改App.js路由配置

首先引入Switch组件包裹路由规则，将首页所有内容封装到精确匹配根路径/的路由中：

import React from 'react';
import './App.css';
// 新增引入Switch
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Header from './components/Header';
import Home from './components/Home';
import About from './components/About';
import Team from './components/Team';
import Blog from './components/Blog';
import Contact from './components/Contact';
import ScrollToTop from './components/ScrollToTop';

const App = () => {
  return (
      <BrowserRouter>
      {/* 如果Blog页不需要展示Header，可将Header移到下方path="/"的Route内部 */}
      <Header />
      <Switch>
        {/* 精确匹配根路径，仅访问首页时渲染首页组件 */}
        <Route exact path="/">
          <Home />
          <About />
          <Team />
          <Contact />
        </Route>
        {/* 匹配/blog路径时仅渲染Blog组件 */}
        <Route path="/blog" component={Blog}></Route>
      </Switch>
      <ScrollToTop />
      </BrowserRouter>
  );
}

export default App;