React路由
1什么是 React 路由?
路由是过管理 URL,实现组件的切换与状态的变化或者说是视图的导航。
2安装路由
在使用路由前需要先安装路由
首先进入项目目录
安装路由的指令
npm install react-router-dom -S
3路由的使用
使用路由时,我们需要将其引入的到我们的代码中
{}里的内容是我们需要的内置组件
import {Link, Route} from 'react-router-dom';
Link与a标签的的功能相似,只是允许用户点击后,进行跳转
Route当用户点击过后,用来决定我们需要跳转到指定路由,
3-1路由的跳转
一个简单跳转的案例
index.js主文件代码
import React from 'react'
import ReactDOM from 'react-dom'
import App from './APP'
ReactDOM.render(<App />, document.getElementById('root'));
App.js代码
import React from 'react';
import {HashRouter,Route,Link} from 'react-router-dom';
import Home from './compoents/Home';
//将Homs.js和Music.js导入进来
import Music from './compoents/Music';
class App extends React.Component{
render(){
return(
//HashRouter表示一个路由的根容器,将来所有的路由相关的东西,都要包裹在HashRouter里面
<HashRouter>
<div>这是根目录</div>
<hr />
{/* 链接*/}
<Link to="/home">首页</Link>
<Link to="/music">音乐</Link>
{/* 路由规则*/}
<Route path="/home" component={Home}></Route>
<Route path="/music" component={Music}></Route>
</HashRouter>
)
}
}
export default App;
Home.js代码
import React from 'react'
class Home extends React.Component{
render(){
return(
<div>
<p>浅笑</p>
</div>
)
}
}
export default Home;
Music.js代码
import React from 'react'
class Music extends React.Component{
render(){
return(
<div>
<p>乐器</p>
</div>
)
}
}
export default Music;
这样就实现了一个简单的路由跳转
3-2路由传值
App.js代码
import React from 'react';
import {HashRouter,Route,Link} from 'react-router-dom';
import Home from './compoents/Home';
//将Homs.js和Music.js导入进来
import Music from './compoents/Music';
class App extends React.Component{
render(){
return(
//HashRouter表示一个路由的根容器,将来所有的路由相关的东西,都要包裹在HashRouter里面
<HashRouter>
<div>这是根目录</div>
<hr />
{/* 链接*/}
<Link to="/home">首页</Link>
<Link to="/music/top/10">音乐</Link>
{/* 路由规则*/}
<Route path="/home" component={Home}></Route>
<Route path="/music/:type/:id" component={Musice} exact></Route>
</HashRouter>
)
}
}
export default App;
Music.js代码
import React from 'react'
import {Link,Route} from 'react-router-dom';
class Musice extends React.Component{
constructor(props){
super(props);
this.state={
//用来简单化代码
msg:props.match.params
//match包含了具体的 url 信息,在 params 字段中可以获取到各个路由参数的值。
}
}
render(){
return(
<div>
音乐--
{this.state.msg.type}--
{this.state.msg.id}
</div>
)
}
}
export default Musice;
这样就实现了一个简单的路由传值
3-3嵌套路由
在写嵌套路由时需要注意路由的路径
Music.js代码
import React from 'react'
import {Link,Route} from 'react-router-dom';
import Yy from './news/Yinyue'//将Yinyue.js导入进来
class Music extends React.Component{
render(){
return(
<div>
音乐
<ul>
<li>
<Link to='/musice/yinyue'>乐器</Link>
</li>
</ul>
<Route path='/musice/yinyue' component={Yy}></Route>
</div>
)
}
}
export default Music;
Yinyue.js代码
import React from 'react';
class Yinyue extends React.Component{
render(){
return (
<div>
<ul>
<li>吉他</li>
<li>钢琴</li>
</ul>
</div>
)
}
}
export default Yinyue;
App.js代码
import React from 'react';
import {HashRouter,Route,Link} from 'react-router-dom';
import Home from './Home';
import Musice from './Musice';
class App extends React.Component{
render(){
return(
<HashRouter>
<div>
<Link to="/home">首页</Link>
<Link to="/musice">音乐</Link>
<hr />
<Route path="/home" component={Home}></Route>
<Route path="/musice" component={Musice}></Route>
</div>
</HashRouter>
)
}
}
export default App;
点击乐器,会出现第二张图的效果,
仅个人整理,如有不足,还请补充