21、React Router 与服务器端渲染全解析

React Router 与服务器端渲染全解析

一、React Router 基础使用

1. 创建 404 页面组件
   • 为了处理用户访问不存在的路由，我们需要创建一个 404 页面组件。以下是创建该组件的代码：

export function Whoops404() { 
  return ( 
    <div> 
      <h1>Resource not found</h1> 
    </div> 
  );
}

- 然后将其添加到路由配置中，当用户访问不存在的路由时，就会显示该组件。在 `App.js` 中的配置如下：

function App() { 
  return ( 
    <div> 
      <Routes> 
        <Route path="/" element={<Home />} /> 
        <Route 
          path="/about" 
          element={<About />} 
        /> 
        <Route 
          path="/events" 
          element={<Events