React路由
推荐https://reacttraining.com/react-router/web/guides/quick-start
https://www.cnblogs.com/xhdx/archive/2017/07/24/7231737.html
命令:
npx create-react-app [my-app][my-app]是项目名,可替换。
cd [my-app]
npm install react-router-dom
npm start
1.react-router 中的三大组件
Router相当于一个容器,不会被渲染出来。你的其他组件都要放在Router中才能使用到react-router的功能。根据功能的不同,Router还分为BrowserRouter,MemoryRouter等。
Link被渲染称一个a标签,通常以声明式的方式被定义在应用程序中。
Route包含一个path,并指明了在path与URL匹配时要渲染的组件。
Router
如果说我们的应用程序是一座小城的话,那么Route就是一座座带有门牌号的建筑物,而Link就代表了到某个建筑物的路线。有了路线和目的地,那么就缺一位老司机了,没错Router就是这个老司机。
React路由有三种component(路由组件,路由match组件和路由导航组件),全都要import {} from ‘react-router-dom’
BrowserRouter:当我们点击了程序中的一个链接之后,BrowserRouter就会找出与这个URL匹配的Route。
- basename
有时候我们的应用只是整个系统中的一个模块,比如应用中的URL总是以 http://localhost/admin/ 开头,这种情况下我们总不能每次定义Link和Route的时候都带上admin吧?react-router已经考虑到了这种情况,所以为我们提供了一个basename属性。为BrowserRouter设置了basename之后,Link中就可以省略掉admin了,而最后渲染出来的URL又会自动带上admin。
Link
Link就像是一个个的路牌,为我们指明组件的位置。Link使用声明式的方式为应用程序提供导航功能,定义的Link最终会被渲染成一个a标签。
Route
它的作用是当location与Route的path匹配时渲染Route中的Component。如果有多个Route匹配,那么这些Route的Component都会被渲染。
与Link类似,Route也有一个exact属性,作用也是要求location与Route的path绝对匹配。
Route的三种渲染方式。
- component,渲染component。
<Route path="/list" component={List}/>
- render
render的类型是function,Route会渲染这个function的返回值。
const renderFn = () =>{
return <h1>render function test1</h1>
};
...
<Route path="/render" render={renderFn}/>
3.children:用的少,不说明。
所有路由中指定的组件将被传入以下三个props。
match.
location.
history.
const renderLogin = (props) =>{
return <h1>login user is: {props.match.params.name}</h1>
};
...
<Route path='/login/:name' render={(props)=>renderLogin(props)} />
App.js
import React, { Component } from 'react';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import Login from './routes/Login';
import WorkFlow from './routes/WorkFlow';
import List from './routes/List';
import NewUser from './routes/NewUser';
import ResetPwd from './routes/ResetPwd';
const renderFn = () =>{
return <h1>render function test1</h1>
};
const renderLogin = (props) =>{
return <h1>login user is: {props.match.params.name}</h1>
};
class App extends Component {
render() {
return (
<Router basename="/admin">
<Switch>
{/*<Route component={Login}/>*/} /*always render Login, no matter url is /login or /list*/
<Route path='/login/:name' render={(props)=>renderLogin(props)} />
<Route path="/list" component={List}/>
<Route path="/workflow" component={WorkFlow}/>
<Route path="/newUser" component={NewUser}/>
<Route path="/resetPwd" component={ResetPwd}/>
{/*render is a function, return result is shown in the screen*/}
<Route path="/render" render={renderFn}/>
{/*
3methods to render: component,render,children
1.component:when you have a component, should be used.
2.render:when you should pass in-scope variables to the component you want to render, should be used.
*/}
<div>
<ul>
<li><Link to='/login/tom'>login</Link></li>
<li><Link to='/list'>documentation</Link></li>
<li><Link to='/workflow'>workflow</Link></li>
<li><Link to='/newUser'>new user</Link></li>
<li><Link to='/resetPwd'>reset password</Link></li>
<li><Link to='/render'>render</Link></li>
</ul>
</div>
</Switch>
</Router>
);
}
}
export default App;
其他类似于Login.js,暂时不写出来
import React,{Component} from 'react';
class Login extends Component {
render() {
return(
<h1>Login</h1>
)
}
}
export default Login;