react-router 侧边栏

最新推荐文章于 2024-08-26 07:52:51 发布

tianxia1202

最新推荐文章于 2024-08-26 07:52:51 发布

阅读量1.8k

点赞数

文章标签： react-router 侧边栏

本文链接：https://blog.csdn.net/tianxia1202/article/details/80711668

版权

1.react-router 官网地址 reacttraining.cn

2.代码如下：

（第一种实现方式）

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
} from 'react-router-dom';

class SlideBar1 extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Router>
                <div style={{ display: 'flex' }}>
                    <div>
                        <ul>
                            <li><Link to='/'>Home</Link></li>
                            <li><Link to='/about'>About</Link></li>
                            <li><Link to='/theme'>Theme</Link></li>
                        </ul>
                        <Route exact path='/' render={ ()=> <div>Home</div> } />
                        <Route path='/about'  render={ ()=> <div>About</div> } />
                        <Route path='/theme'  render={ ()=> <div>Theme</div>} />
                    </div>
                    <div style={{ flex: 1 }}>
                        <Route exact path='/' render={ ()=> <div>Home</div> } />
                        <Route path='/about'  render={ ()=> <div>About</div> } />
                        <Route path='/theme'  render={ ()=> <div>Theme</div>} />
                    </div>
                </div>
            </Router>
        )
    }
}

export default SlideBar1;

上面的代码还可以简化，简化之后功能有所改变

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
} from 'react-router-dom';

const Theme = ({ match })=> (
    <div>
        { match.params.id }
    </div>
)

class SlideBar1 extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Router>
                <div style={{ display: 'flex' }}>
                    <div>
                        <ul>
                            <li><Link to='/home'>Home</Link></li>
                            <li><Link to='/about'>About</Link></li>
                            <li><Link to='/theme'>Theme</Link></li>
                        </ul>
                        <Route path='/:id' component={ Theme } />
                    </div>
                    <div style={{ flex: 1 }}>
                        <Route path='/:id' component={ Theme } />
                    </div>
                </div>
            </Router>
        )
    }
}

export default SlideBar1;