在React Router v6中创建/
和/home
路径的方法如下:
npm install react-router-dom@next
import { BrowserRouter, Routes, Route } from 'react-router-dom';
Home
的组件:function Home() {
return <h1>Welcome to the Home Page!</h1>;
}
BrowserRouter
组件包裹你的应用程序,并在其中定义路由规则。在Routes
组件中,使用Route
组件来定义路径和对应的组件。对于/
路径,你可以使用element
属性来指定要渲染的组件。对于/home
路径,你可以使用path
属性来指定路径,并使用element
属性来指定要渲染的组件。function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/home" element={<Home />} />
</Routes>
</BrowserRouter>
);
}
index.js
文件中进行渲染:import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
现在,当你访问/
或/home
路径时,React Router v6将会渲染Home
组件的内容。
领取专属 10元无门槛券
手把手带您无忧上云