title: React教程
date: 2023-04-06 20:51:55
tags: [react]
categories: [js]
React路由的基本使用
zxl@linux:~/Desktop$ node -v
v16.17.0
zxl@linux:~/Desktop$ npm -v
8.15.0
npm i -g create-react-app
create-react-app router-demo1
cd router-demo1
npm start
# 安装路由
npm i react-router-dom
index.js
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter} from "react-router-dom"
import App from "./App";
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById("root")
)
App.jsx
import React from 'react'
import {
Link,Route} from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
export default function App() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>React Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{
/* 原生html中，靠<a>跳转不同的页面 */}
{
/* <a className="list-group-item" href="./about.html">About</a>
<a className="list-group-item active" href="./home.html">Home</a> */}
{
/* 在React中靠路由链接实现切换组件--编写路由链接 */}
<Link className="list-group-item" to="/about">About</Link>
<Link className="list-group-item" to="/home">Home</Link>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{
/* 注册路由 */}
<Route path="/about" component={
About}/>
<Route path="/home" component={
Home}/>
</div>
</div>
</div>
</div>
</div>
)
}
About/index.jsx
import React from 'react'
export default function About() {
return (
<div>About</div>
)
}
Home/index.jsx
import React from 'react'
export default function Home() {
return (
<div>Home</div>
)
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>react脚手架</title>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="/css/bootstrap.css">
<style>
.atguigu{
background-color: rgb(209, 137, 4) !important;
color: white !important;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>