首先,我们来说一下react路由是做什么的呢?
我们经常会看到类似于微信下面的tab切换吧!像这种效果在react中就可以用路由实现。
在webpack搭建的环境中,我们需要用命令安装路由
Installation | 安装
npm install react-route-dom
路由的核心代码:
<Router>
<div>
<div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
<ul>
<li><Link to="/">主页</Link></li>
<li><Link to="/about">关于<Link></li>
<li><Link to="/topics">主题列表<Link></li>
</ul>
</div>
</Router>
我解释一下上面的有些标签的作用:
<Link>
为您的应用提供声明式的、无障碍的导航。
import { Link } from "react-route-dom";
<Link to="/about"></Link>
to: string
需要跳转的路径(pathname)或者地址(location)
<Link to="courses" />
to: object
需要跳转到的地址
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashBorder: true }
}} />
replace: bool
当设置为true时,点击链接时后将使用新地址替换掉历史记录中的旧地址。
当值为false时,点击链接时后会在原有访问历史记录基础上新增一条记录。
默认为false
<Link to="/courses" replace />
<NavLink>
是Link的一个特定版本,会在匹配上当前的URL的时候会给已经渲染的元素添加样式参数。
import { NavLink } form "react-router-dom";
<NavLink to="/about">About</NavLink>
activeClassName: string
当元素匹配到当前URL时,这个类会被赋予给这个元素。其默认值为active,这个类会被添加到className属性的后面(追加)。
<navLink to="about" activeClassName="selected">About</NavLink>
activeStyle: object
当此元素被选中时,为此元素添加样式。
<NavLink to="about" activeStyle={{ color: red }}></NavLink>
exact: bool
当值为true时,只有当地址完全匹配class和style时才会用。
全部的代码如下:
文件的主目录:
- react-route
- src
- Component
- footer.js
- about.js
- home.js
- topics.js
- js
- index.js
- css
- common.css
- reset.css
- Component
- index.html
- package.json
- webpack.config.js
- src
这是文件的目录
Component中放的是组件。
import React,{ Component } from "react";
import { render } from "react-dom";
import {
BrowserRouter as Router,
Route,
Link,
} from "react-router-dom";
import Home from "./home";
import About from "./about";
import Topics from "./topics";
export default class BasicExample extends Component{
render(){
return(
<Router>
<div className="footer">
<div className="list_content">
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
<ul className="list">
<li className="ul_li center"><Link to="/">主页</Link></li>
<li className="ul_li center"><Link to="/about">关于</Link></li>
<li className="ul_li center"><Link to="/topics">主题列表</Link></li>
</ul>
</div>
</Router>
)
}
}
index.js
//index.js
import "../css/reset.css";
import "../css/common.css";
import React,{ Component } from "react";
import { render } from "react-dom";
import Header from "../Components/header";
//import Content from "../Components/content";
import BasicExample from "../Components/footer";
class Main extends Component{
render(){
return (
<div className="container">
<Header />
<BasicExample />
</div>
)
}
}
render(
<Main />,
document.getElementById("root")
);