🍁 作者:知识浅谈,CSDN签约讲师,CSDN博客专家,华为云云享专家,阿里云专家博主 📌 擅长领域:全栈工程师、爬虫、ACM算法 💒 公众号:知识浅谈 🔥网站:vip.zsqt.cc
🤞ReactRouter的使用🤞
温馨提醒:这个分为三步
📐第 1 步:编写不同页面的代码为单独的组件
Home.js
function Home(){
return <span>Home</span>
}
export default Home;
Login.js
function Login(){
return <span>Login</span>
}
export default Login;
📐第 2 步 :引入组件配置path - componen
//创建router实例对象并且配置路由对应关系
const router = createBrowserRouter([
{
path:'/login',
element:<Login/>
},
{
path:'/home',
element:<Home/>
}
])
📐第 3 步: 应用入口文件渲染-RouterProvider (注入router实例)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<RouterProvider router={router}></RouterProvider>
</React.StrictMode>
);
npm run start
login页面
home页面
大功告成,撒花致谢🎆🎇🌟,关注我不迷路,带你起飞带你富。