- 因爲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();
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
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>
)
}
}