文章目录
路由的基本使用
create-react-app router_app
,创建react项目:router_app。默认使用当前react的最新版本:react@18、react-dom@18。
npm install -save react-router-dom
,默认下载安装最新版本r:react-router-dom@6。
涉及的文件包括:
- 模板文件index.html
- 入口文件index.js
- 入口组件App.js
- 路由组件pages/Home/index.jsx,即Home组件
- 路由组件pages/About/index.jsx,即About组件
模板文件index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
入口文件index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from "react-router-dom";
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
注意点:<BrowserRouter></BrowserRouter>
。
入口组件App.js
import React from 'react'
import {NavLink,Route,Routes,Navigate} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
export default function App() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
<NavLink className="list-group-item" to="/about">About</NavLink>
<NavLink className="list-group-item" to="/home">Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
<Routes>
<Route path="/about" element={<About/>}></Route>
<Route path="/home" element={<Home/>}></Route>
<Route path="/" element={<Navigate to="/about"/>}></Route>
</Routes>
</div>
</div>
</div>
</div>
</div>
)
}
注意点:
- 路由链接。
<NavLink className="list-group-item" to="/about">About</NavLink>
- 注册路由。
<Routes> <Route path="/about" element={<About/>}></Route> </Routes>
- 重定向。
<Route path="/" element={<Navigate to="/about"/>}></Route>
pages/Home/index.jsx(Home组件)
import React from 'react'
export default function Home() {
return (
<h2>我是Home的内容</h2>
)
}
pages/About/index.jsx(About组件)
import React from 'react'
export default function About() {
return (
<h2>我是About的内容</h2>
)
}
NavLink的高亮
activeClassName不奏效且React报错
项目根路径下新建css文件:App.css。
App.js中引入App.css,并给NavLink组件设置activeClassName属性。
代码变更涉及的文件有:
- App.css
- App.js
App.css
.myActive{
background: orange !important;
color: white !important;
}
App.js
import React from 'react'
import {NavLink,Route,Routes,Navigate} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import "./App.css";
export default function App() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
<NavLink className="list-group-item" activeClassName="myActive" to="/about">About</NavLink>
<NavLink className="list-group-item" activeClassName="myActive" to="/home">Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
<Routes>
<Route path="/about" element={<About/>}></Route>
<Route path="/home" element={<Home/>}></Route>
<Route path="/" element={<Navigate to="/about"/>}></Route>
</Routes>
</div>
</div>
</div>
</div>
</div>
)
}
报错:React不认识activeClassName这个属性。
className是一个函数
代码变更涉及的文件有:
- App.css
- App.js
App.css
.myActive{
background: orange !important;
color: white !important;
}
App.js
import React from 'react'
import {NavLink,Route,Routes,Navigate} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import "./App.css";
export default function App() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
<NavLink className={({isActive}) => isActive?"list-group-item myActive":"list-group-item"} to="/about">About</NavLink>
<NavLink className={({isActive}) => isActive?"list-group-item myActive":"list-group-item"} to="/home">Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
<Routes>
<Route path="/about" element={<About/>}></Route>
<Route path="/home" element={<Home/>}></Route>
<Route path="/" element={<Navigate to="/about"/>}></Route>
</Routes>
</div>
</div>
</div>
</div>
</div>
)
}
或者这样写
import React from 'react'
import {NavLink,Route,Routes,Navigate} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import "./App.css";
export default function App() {
function computeClassName({isActive}){
return isActive?"list-group-item myActive":"list-group-item";
}
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
<NavLink className={computeClassName} to="/about">About</NavLink>
<NavLink className={computeClassName} to="/home">Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
<Routes>
<Route path="/about" element={<About/>}></Route>
<Route path="/home" element={<Home/>}></Route>
<Route path="/" element={<Navigate to="/about"/>}></Route>
</Routes>
</div>
</div>
</div>
</div>
</div>
)
}
- 第一种写法:
<NavLink className="list-group-item" activeClassName="myActive" to="/about">About</NavLink>
。 - 第二种写法:
<NavLink className={computeClassName} to="/about">About</NavLink>
。