新式路由的使用官网
一、项目中使用
1、安装
npm install react-router-dom --save
2、在项目中基本的使用
import React, {Component} from 'react'; // 引入路由的文件 import {BrowserRouter,Route,Link} from 'react-router-dom'; import Home from "./components/Home"; import About from "./components/About"; import Topics from "./components/Topics"; export default class App extends Component { constructor(props) { super(props); } render() { return ( <BrowserRouter> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/topics">Topics</Link></li> <hr/> {/*注意这个地方path的值要跟上面Link的to一样*/} <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/topics" component={Topics}/> </ul> </BrowserRouter> ) } }
3、
exact
是一个boolean
的值,表示完全匹配4、关于
Route
传递参数到组件中5、利用
match
创建子路由import React, {Component} from 'react'; // 引入路由的文件 import {BrowserRouter,Route,Link} from 'react-router-dom'; export default class Topics extends Component { constructor(props) { super(props); } render() { console.log(this.props); const {match} = this.props; return ( <div> <ul> <li><Link to={`${match.url}/rending`}>rending</Link></li> <li><Link to={`${match.url}/component`}>component</Link></li> <li><Link to={`${match.url}/text`}>text</Link></li> </ul> {/*:xxx传递参数到子组件中*/} <Route path={`${match.url}/:topicsId`} component={Topic}/> <Route exact path={match.url} render={()=>(<h4 style={{'color':'#f00'}}>请选择一个</h4>)}/> </div> ) } } class Topic extends Component{ constructor(props){ super(props); } render(){ //console.log(this.props); // 从<Route path={`${match.url}/:topicsId`} component={Topic}/>获取传递过来的参数 const {match:{params:{topicsId}}} = this.props; return( <h4>{topicsId}</h4> ) } }
6、
NavLink
的使用NavLink
与Link
功能有点类型,我们常用这个来设置选中的样式(activeClassName
或activeStyle
)... // 引入样式(webpack中需要配置) require('./../styles/topics.css'); ... <li><NavLink activeClassName="active" to={`${match.url}/rending`}>rending</NavLink></li> <li><NavLink activeClassName="active" to={`${match.url}/component`}>component</NavLink></li> <li><NavLink activeClassName="active" to={`${match.url}/text`}>text</NavLink></li> ...
7、
Route
中显示组件的方式- 1、使用
component
链接到一个组件 - 2、使用
render
直接把简单的组件方式写在里面,代码见switch
- 1、使用
8、
switch
的使用也没什么实在的作用,仅仅是只能匹配一个的作用,下面的代码如果去处
switch
,那么about中就会匹配多个// 引入路由文件 import {BrowserRouter as Router,Route,Link,NavLink,Switch} from 'react-router-dom'; ... <div> <Router> <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/123">123</Link></li> <li><Link to="/456">456</Link></li> </ul> <hr/> <Switch> <Route exact={true} path="/" render={()=>(<h3>主页</h3>)}/> <Route path="/about" render={()=>(<h3>about页面</h3>)}/> <Route path="/:itemId" render={({match})=>(<h3>itemId:{match.params.itemId}</h3>)}/> <Route render={()=>(<h3>没有找到页面</h3>)}/> </Switch> </div> </Router> </div> ...
9、重定向(
Redirect
)简单的可能就是判断用户没登录就跳转到登录页面
// 引入路由文件 import {BrowserRouter as Router, Route, Link, Redirect} from 'react-router-dom'; let login = false; ... render() { return ( <Router> <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/login">login</Link></li> </ul> <hr/> <Route exact={true} path="/" render={()=>(login?<h3>主页</h3>:<Redirect to="/login"/>)}/> <Route path="/about" render={()=>(<h3>about页面</h3>)}/> <Route path="/login" render={() =>(<h3>请登录</h3>)}/> </div> </Router> ) } ...