我使用React Router尝试改变了首页
我想做的事情
在 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