React -router 简单用法
1. 安装依赖
npm install react-router-dom
2. 加载依赖
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
注意： Instead of <a href="/"> we use <Link to="/">
3. 简单使用
import React, { Component } from 'react';
import './App.css'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
function Index() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}
class App extends Component {
render() {
return (
<Router>
<nav>
<ul>
<li>
<Link to ='/'>first</Link>
</li>
<li>
<Link to ='/second'>second</Link>
</li><li>
<Link to ='/last'>last</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Index} />
<Route path="/second" component={About} />
<Route path="/last" component={Users} />
</Router>
);
}
}
export default App;
4. 嵌套路由
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function App() {
return (
<Router>
<div>
<Header />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Topic({ match }) {
return <h3>Requested Param: {match.params.id}</h3>;
}
function Topics({ match }) {
return (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
<Route path={`${match.path}/:id`} component={Topic} />
<Route
exact
path={match.path}
render={() => <h3>Please select a topic.</h3>}
/>
</div>
);
}
function Header() {
return (
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
);
}
export default App;
5. router 的 三种方法
-
component
component的值是一个组件，当URL和Route匹配时，component属 性定义的组件就会被渲染。例如：
<Route path='/foo' component={Foo}>
当URL="http://example.com/foo"时，Foo组件会被渲染
-
renden
render的值是一个函数，这个函数返回一个React元素。这种方式可 以方便地为待渲染的组件传递额外的属性。例如：
<Route path='/foo' render={(props) => (
<Foo {...props} data={extraProps} />
)}>
Foo 组件接收了一个额外的data属性。
-
children
children的值也是一个函数，函数返回要渲染的React元素。与前两 种方式不同之处是，无论是否匹配成功，children返回的组件都会被渲 染。但是，当匹配不成功时，match属性为null。例如：
<Route path='/foo' children={(props) => (
<div className={props.match ? 'active' : ''}>
<Foo />
</div>
</Route>
如果Route匹配当前URL，待渲染元素的根节点div的class将被设置 成active。
6. match
当URL和Route匹配时，Route会创建一个match对象作为props中的 一个属性传递给被渲染的组件。这个对象包含以下4个属性。
（1）params：Route的path可以包含参数，例如<Route path='/foo/:id'>包含一个参数id。params就是用于从匹配的URL中解析出 path中的参数，例如，当URL="http://example.com/foo/1"时，params = {id: 1}。
（2）isExact：是一个布尔值，当URL完全匹配时，值为true；当 URL部分匹配时，值为false。例如，当path="/foo"、 URL="http://example.com/foo"时，是完全匹配；当 URL="http://example.com/ foo/1"时，是部分匹配。
（3）path：Route的path属性，构建嵌套路由时会使用到。
（4）url：URL的匹配部分。
7.switch 和 exact
当URL和多个Route匹配时，这些Route都会执行渲染操作。如果只 想让第一个匹配的Route渲染，那么可以把这些Route包到一个Switch组 件中。如果想让URL和Route完全匹配时，Route才渲染，那么可以使用 Route的exact属性。Switch和exact常常联合使用，用于应用首页的导 航。例如：
<Router>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/posts' component={Posts}/>
<Route path='/:user' component={User}/>
</Switch>
</Router>
如果不使用Switch，当URL的pathname为"/posts"时，<Route path='/posts' />和<Route path='/:user' />都会被匹配，但显然我们并不希
望<Route path='/:user' />被匹配，实际上也没有用户名为posts的用户。 如果不使用exact，"/" "/posts" "/user1"等几乎所有URL都会匹配第一个 Route，又因为Switch的存在，后面的两个Route永远也不会被匹配。使 用exact，保证只有当URL的pathname为"/"时，第一个Route才会被匹 配。
网友评论