react路由跳转

这是子组件页面，模拟的公共头部

import React from 'react';

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

动态版

export default class Header extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        list: [
            {
                path: "/",
                name: "Home",
                comp: Home
            },
            {
                path: "/About",
                name: "About",
                comp: About
            },
        ]
    }
}
render() {
    return <div>
        <Router>
            <div>
                <nav>
                    <ul>
                        {
                            this.state.list.map((item, i) => <li key={i}>
                                <Link to={item.path} >{item.name}</Link>
                            </li>)
                        }
                    </ul>
                    <div>
                        {
                            this.state.list.map((item, i) => <Route exact path={item.path} component={item.comp} key={i}></Route>)
                        }
                    </div>
                </nav>
            </div>
        </Router>
    </div>
}

}

2. 常用组件说明

Router 组件：包裹整个应用，一个 React 应用只需要使用一次 两种常用 Router：HashRouter 和 BrowserRouter HashRouter：使用 URL 的哈希值实现（localhost:3000/#/first） BrowserRouter（推荐） ：使用 H5 的 history API 实现（localhost:3000/first） Link 组件：用于指定导航链接（a 标签）,exact:用于查找当前component组件，找到了就不再往下执行