admin管理员组文章数量:1633819
目录
一、路由配置
二、路由传值
2.1 静态传值
2.2 动态传值
2.3 es6模板传值
2.4 传多个值
2.5 get 传值
三、配置子路由
四、编程式路由
4.1 同级路由跳转
4.2 子父路由跳转
一、路由配置
- 1.安装路由
cnpm install react-router-dom –save
- 2.配置路由
新建一个Main文件来封装路由,创建三个组件Home.jsx,News.jsx,My.jsx,在main.jsx 文件中配置这三个组件的路由
配置路由时要先导入路由,最后要在App.js中导入Main.jsx
import {BrowserRouter as Router,Route,Link} from "react-router-dom"
import React,{Component} from "react";
//在哪使用路由 就在哪导入路由
import {BrowserRouter as Router,Route,Link} from "react-router-dom"
//导入组件
import Home from "./Home";
import News from "./News";
import My from "./My";
class Main extends Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<Router>
{/* 路由入口 */}
<Link to="/">Home</Link>
<Link to="/news">News</Link>
<Link to="/my">My</Link>
{/* 配置路由 */}
<Route path="/" component={Home}></Route>
<Route path="/news" component={News}></Route>
<Route path="/my" component={My}></Route>
</Router>
);
}
}
export default Main;
二、路由传值
2.1 静态传值
import React,{Component} from "react";
//在哪使用路由 就在哪导入路由
import {BrowserRouter as Router,Route,Link} from "react-router-dom"
//导入组件
import Home from "./Home";
import News from "./News";
import My from "./My";
class Main extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<Router>
{/* 路由入口 */}
<Link to="/">Home</Link>
{/* 1.固定传值 */}
<Link to="/news/1">News</Link>
<Link to="/my">My</Link>
{/* 配置路由 */}
<Route path="/" component={Home}></Route>
<Route path="/news/:id" component={News}></Route>
<Route path="/my" component={My}></Route>
</Router>
);
}
}
export default Main;
2.2 动态传值
import React,{Component} from "react";
//在哪使用路由 就在哪导入路由
import {BrowserRouter as Router,Route,Link} from "react-router-dom"
//导入组件
import Home from "./Home";
import News from "./News";
import My from "./My";
class Main extends Component {
constructor(props) {
super(props);
this.state = {
id:10,
};
}
render() {
return (
<Router>
{/* 路由入口 */}
<Link to="/">Home</Link>
{/* 2.动态传值 + 拼接 在子组件中接收值*/}
{/* <Link to={"/news/"+this.state.id}>News</Link> */}
<Link to="/my">My</Link>
{/* 配置路由 */}
<Route path="/" component={Home}></Route>
<Route path="/news/:id" component={News}></Route>
<Route path="/my" component={My}></Route>
</Router>
);
}
}
export default Main;
2.3 es6模板传值
import React,{Component} from "react";
//在哪使用路由 就在哪导入路由
import {BrowserRouter as Router,Route,Link} from "react-router-dom"
//导入组件
import Home from "./Home";
import News from "./News";
import My from "./My";
class Main extends Component {
constructor(props) {
super(props);
this.state = {
id:10,
};
}
render() {
return (
<Router>
{/* 路由入口 */}
<Link to="/">Home</Link>
{/* 3.es6模板传值 */}
{/* ``不是单引号 tab上方的键 */}
<Link to={`/news/${this.state.id}`}>News</Link>
<Link to="/my">My</Link>
{/* 配置路由 */}
<Route path="/" component={Home}></Route>
<Route path="/news/:id" component={News}></Route>
<Route path="/my" component={My}></Route>
</Router>
);
}
}
export default Main;
2.4 传多个值
import React,{Component} from "react";
//在哪使用路由 就在哪导入路由
import {BrowserRouter as Router,Route,Link} from "react-router-dom"
//导入组件
import Home from "./Home";
import News from "./News";
import My from "./My";
class Main extends Component {
constructor(props) {
super(props);
this.state = {
id:10,
name:"jia"
};
}
render() {
return (
<Router>
{/* 路由入口 */}
<Link to="/">Home</Link>
{/* 4.传多个值 */}
<Link to={`/news/${this.state.id}/${this.state.name}`}>News</Link>
<Link to="/my">My</Link>
{/* 配置路由 */}
<Route path="/" component={Home}></Route>
<Route path="/news/:id/:name" component={News}></Route>
<Route path="/my" component={My}></Route>
</Router>
);
}
}
export default Main;
以上几种方法在对应的组件中接收值
渲染完成之后 接收传值 componentDidMount()生命周期
import React,{Component} from "react";
class News extends Component {
constructor(props) {
super(props);
this.state = { };
}
//渲染完成之后 接收传值
componentDidMount(){
console.log(this.props.match.params)
}
render() {
return (
<div>News</div>
);
}
}
export default News;
2.5 get 传值
相当于在路径上加?id=1
import React,{Component} from "react";
//在哪使用路由 就在哪导入路由
import {BrowserRouter as Router,Route,Link} from "react-router-dom"
//导入组件
import Home from "./Home";
import News from "./News";
import My from "./My";
class Main extends Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<Router>
{/* 路由入口 */}
<Link to="/">Home</Link>
<Link to="/news">News</Link>
//get传值
<Link to="/my/?id=1&name=2">My</Link>
{/* 配置路由 */}
<Route path="/" component={Home}></Route>
<Route path="/news/:id/:name" component={News}></Route>
<Route path="/my" component={My}></Route>
</Router>
);
}
}
export default Main;
在My.jsx组件中接收值
对于这样的值可以自己写算法解析 也可以导入node的url模块进行解析
算法解析
import React,{Component} from "react";
class My extends Component {
constructor(props) {
super(props);
this.state = { };
}
componentDidMount(){
console.log(this.props.location.search) //?id=1&name=2
// 对于这样的值可以自己写方法解析 也可以导入node的url模块进行解析
let url=this.props.location.search;
this.changeUrl(url);
}
changeUrl=(url)=>{
let u=url.replace("?","");
console.log(u)
let ua=u.replace(/=/g,":").replace("&",",");
console.log(ua)
console.log(ua.split(",")[0].split(":")[1]);
//把一个字符串分割成字符串数组:
}
render() {
return (
<div>My</div>
);
}
}
export default My;
导入url模块解析
安装url
cnpm install url --save
import React,{Component} from "react";
//导入url
import url from "url"
class My extends Component {
constructor(props) {
super(props);
this.state = { };
}
componentDidMount(){
console.log(this.props.location.search) //?id=1&name=2
let localurl=this.props.location.search
let src=url.parse(localurl,true)
console.log(src)
}
render() {
return (
<div>My</div>
);
}
}
export default My;
三、配置子路由
import React,{Component} from "react";
import {BrowserRouter as Router,Route,Link} from "react-router-dom";
import Child from "./Child"
class Home extends Component {
constructor(props) {
super(props);
this.state = {
id:10
};
}
render() {
return (
<div>Home
<Router>
<Link to={"/home/child/"+this.state.id}>child</Link>
<Route path="/home/child/:id" component={Child}></Route>
</Router>
</div>
);
}
}
export default Home;
四、编程式路由
4.1 同级路由跳转
在News.jsx组件中写编程式路由跳转到同级路由 My.jsx
import React,{Component} from "react";
class News extends Component {
constructor(props) {
super(props);
this.state = { };
}
//渲染完成之后 接收传值
componentDidMount(){
console.log(this.props.match.params)
}
//编程式路由 路由条状
toMy=()=>{
this.props.history.push("/my")
}
render() {
return (
<div>
News
<button onClick={this.toMy}>跳转到同级路由</button>
</div>
);
}
}
export default News;
4.2 子父路由跳转
从News.jsx组件跳到父路由组件Home.jsx,以及跳动同级路由My.jsx组件
(不能跳转到爷路由)
跳转路由时可以传参
import React,{Component} from "react";
import {BrowserRouter as Router,Route,Link} from "react-router-dom";
import Child from "./Child";
class News extends Component {
constructor(props) {
super(props);
this.state = { };
}
//渲染完成之后 接收传值
componentDidMount(){
console.log(this.props.match.params)
}
//编程式路由 路由跳转
toHome=()=>{
//跳转路由是可以传值
this.props.history.push("/",{id:1})
// this.props.history.push("/")
}
toMy=()=>{
this.props.history.push("/my")
}
render() {
return (
<div>
News
<button onClick={this.toHome}>跳转到父级路由</button>
<button onClick={this.toMy}>跳转到同级路由</button>
<Router>
<Link to={"/news/child"}>child</Link>
<Route exact path="/news/child" component={Child}></Route>
</Router>
</div>
);
}
}
export default News;
版权声明:本文标题:React 路由配置 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729176191a1188746.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论