转载https://blog.youkuaiyun.com/We_jia/article/details/89353729#%E4%B8%80%E3%80%81%E8%B7%AF%E7%94%B1%E9%85%8D%E7%BD%AE
原
React 路由配置
目录
一、路由配置
- 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;
扫一扫
1666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
