我想做的事情

在 React 中，如果你没有指定路径的域名（例如 http://localhost），会默认调用 index.tsx（或 App.tsx）作为页面。但我想将这个默认页面替换为另一个组件。

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'

import { App } from './App'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
)
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

import React from 'react'

import { PostsTop } from './components/posts/PostsTop'

export const App = () => {
  return (
         {/* PostsTop　をトップページにしたい */} 
  )
}

步骤

安装react-router-dom库

安装名为「react-router-dom」的包。

$ yarn add react-router-dom

2. 在 App.tsx 中添加。

在BrowserRouter和Routes中编写Route。

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

import { PostsTop } from './components/posts/PostsTop'

export const App = () => {
  return (
        <BrowserRouter>
          <Routes>
            <Route path='/' element={<PostsTop />} />
          </Routes>
        </BrowserRouter>
  )
}

如果您希望进一步更改URL，请更改App.tsx文件中的Rote路径参数即可。

補充完善

在React Router v5到v6的升级过程中，写法发生了相当大的变化。
像下面这样使用“Switch”的方法是v5之前的写法，请注意。
（以下是官方文档的引用）

React Router v6 引入了一个名为 Routes 的组件，类似于 Switch，但功能更强大。

import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'

import PostsTop from './components/posts/PostsTop'

export const App = () => {
  return (
        <BrowserRouter>
         <Switch>
          <Route path="/" exact component={PostsTop} />
         </Switch>
        </BrowserRouter>
  )
}

请提供更多上下文以便我可以更准确地回答您的问题。

以下是对这篇文章的本地化汉语释义。请点击链接查看：https://ralacode.com/blog/post/how-to-use-react-router/
或者您也可以阅读官方文档：https://reactrouter.com/en/6.13.0/upgrading/v5#upgrade-to-react-router-v6