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-vitalsreportWebVitals();
home组件的内容
import{ Component }from'react';import{renderRoutes}from'react-router-config'import{ Link }from'react-router-dom'classHomeextendsComponent{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>)}}exportdefault Home
这是about页面的内容
import{ Component }from'react';classAboutextendsComponent{render(){return(<div>这是about页面</div>)}}exportdefault 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>
)
}
}