react路由嵌套路由及路由传参
因为react的嵌套路由跟vue比就像屎一样 不好写 所以在使用的时候建议使用react-router-config来配置路由 会相对轻松第一步 先安装路由依赖yarn add react-router-dom --saveyarn add react-router-config --save第二部 配置路由文件新建一个routes.js文件 新建pages文件夹和home组件about组件及pa
·
- 因为react的嵌套路由跟vue比就像屎一样 不好写 所以在使用的时候建议使用react-router-config来配置路由 会相对轻松
第一步 先安装路由依赖
yarn add react-router-dom --save
yarn add react-router-config --save
第二部 配置路由文件
- 新建一个routes.js文件 新建pages文件夹和home组件about组件及page2组件
import React from 'react';
import Home from '../pages/Home'
import About from '../pages/About'
import page2 from '../pages/Page2'
const routes = [
{
path: '/',
component: Home,
children: [
{
path: '/about',
component: About,
}
]
},
{
path: '/page2/:id', //动态路由
component: page2
}
]
export {routes}
第三部 在react的index.js中导入路由
import React from 'react'; // react 基础库
import ReactDOM from 'react-dom'; // react渲染dom的库
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {routes} from './router/index'
import { HashRouter } from 'react-router-dom'
import { renderRoutes } from 'react-router-config'
// console.log(renderRoutes)
ReactDOM.render(
<HashRouter>
{renderRoutes(routes)}
</HashRouter>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
- home组件的内容
import { Component } from 'react';
import {renderRoutes} from 'react-router-config'
import { Link } from 'react-router-dom'
class Home extends Component {
constructor(props) {
super()
// console.log(props)
this.state = {
routes: props.route.children
}
}
render() {
return (
<div>
这是home页面
<Link to="/about">进入about页面</Link>
{renderRoutes(this.state.routes)}
</div>
)
}
}
export default Home
- 这是about页面的内容
import { Component } from 'react';
class About extends Component {
render() {
return (
<div>这是about页面</div>
)
}
}
export default About
react 路由传参的方法
- 跳转开始的页面
import { Link } from 'react-router-dom'
import { Component } from 'react';
class Home extends Component {
constructor(props) {
super()
}
render() {
return (
<div>
<Link to={{patename: "定义的路由地址", query: {id: 123}}}>进入about页面</Link>
</div>
)
}
}
- 跳转进入的页面
import { Link } from 'react-router-dom'
import { Component } from 'react';
class About extends Component {
constructor(props) {
super()
}
render() {
console.log(this.props.history.location.query) // 页面获取query参数的方法
// 如果是动态路由 获取参数的方法 this.props.match.params.key
return (
<div>about页面</Link>
</div>
)
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)