ract-router4,相比较react-router2有了重大变化。
目标:掌握
- BrowserRouter
- Route
- Link / NavLink
1、首先安装router-router4
npm install react-router-dom --save
为了url的友好性,官方推荐我们用BrowserRouter,也就是我们传统的url的模式,而不是通过/#/分隔的哈希url
最简单的基础实例如下:
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter } from 'react-router-dom';
class App extends Component {
render() {
return (
<BrowserRouter>
<div className='App'>
Yay
</div>
</BrowserRouter>
);
}
}
export default App;
2、router的属性介绍
path:path属性接受一个字符串,当你给他一个有效的URL的时候,他就会渲染相对于的组件。示例:
<Route path='/home' />
<Route path='/home' exact=true/>
例如我们上面这种方式来渲染路由,如果没有exact属性,那么会匹配到/home一下的任意路由,但是如果有exact属性之后,就只精确的匹配/home路由。
component:接受用来渲染相对应路由的单个组件。示例:
<Route path='/home' component={Home} />
render() {
return(
<BrowserRouter>
<div className='app'>
<Router path='/home' render={({match}) => {
return (
<div>
{match.path.split('/')[1]}
Home Page!
</div>
);
}}
</div>
</BrowserRouter>
);
}
3、在路由render里面,如果我们希望给子组件传递一些参数,我们一样可以用props或者redux来做状态管理,这种方式在router中是被允许的
return (
<Router>
<div className='App'>
<div className='App-header'>
<div className='App-title'>Idea & Thought Box</div>
<NavBar />
</div>
<Route path='/' component={Home} />
// we create the path
<Route path='/create-idea' render={({ match }) =>
// call render which takes a callback and return our component
// with any props we'll need.
<CreateItem submitForm={this.submitIdea.bind(this)}/>
} />
</div>
</Router>
);
4、Link&NavLink
非常简单易上手
直接使用<Link to='/home'>就可以导航到我们需要的页面去了,
NavLink和Link的区别是多一个属性activeClassName&&activeStyle,就是当路由被激活的时候,就执activeClassName&&activeStyle,可以达到定制点击切换的样式效果。示例如下:
import React from 'react';
import { NavLink } from 'react-router-dom';
export const NavBar = () => {
return (
<div className='navBar'>
<NavLink exact to='/' activeClassName='selected'>Home</NavLink>
<NavLink to='/create-idea' activeClassName='selected'>Create Idea</NavLink>
<NavLink to='/ideas' activeClassName='selected'>All Ideas</NavLink>
</div>
);
}
5、动态路由:
<Route path='/ideas/:id'>
这种路由方式,可以接受ideas下面任何符合react渲染的子路由,通过id的不同,来动态渲染不同的子路由页面。示例:
<Route path='/ideas/:id' render={({ match }) => {
const idea = ideas.find((idea) => idea.id === parseInt(match.params.id));
if (idea) {
return <ListItem match={match} {...idea} />;
}
return (<div>This idea does not exist! </div>);
// note that React Router also has a <Redirect> component.
//Read more here: https://reacttraining.com/react-router/web/api/Redirect
}} />
当我们用Link去访问的时候,这样访问就可以了。
<Link to={`/ideas/${id}`}><h1>{title}</h1></Link>
6、实战示例:
用create-react-app初始化一个react项目,删掉多余的文件和目录,形成如下目录文件:
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'));
registerServiceWorker();
app.js代码如下:
import React from 'react';
import MainRoute from './routes/MainRoute';
const App = () => (
<div>
<MainRoute/>
</div>
)
export default App;
MainRoute.js代码如下:
import React from 'react'; import { Switch, Route } from 'react-router-dom' import Home from '../Home'; import Todos from './TodoRoute'; import StatusComponent from '../StatusComponent'; const MainRoute = () => ( <Switch> <Route exact path="/" component={Home}/> <Route path="/todos" component={Todos} /> <Route path="/status" component={StatusComponent} /> </Switch> ) export default MainRoute;
完成!