react-app路由 react-router-dom 引入和配置

版权声明：前端菜鸟--人间草木所有 https://blog.csdn.net/qq_43258252/article/details/87883894

首先你要确保react-app环境搭建成功

第一步：

因为 react-app 默认没有安装react路由，所以要安装

安装 react-router-dom 依赖，npm install react-router-dom --save

第二步：

在src/pages/ 下新建两个组件 a.js  和  b.js

写入如下代码：

a.js  文件

import React, { Component } from 'react'

class Login extends Component {
  render() {
    return <div>Login</div>
  }
}

export default Login

b.js 文件 

import React, { Component } from 'react'

class Admin extends Component {
  render() {
    return <div>Admin</div>
  }
}

export default Admin

第三步：

在src/pages/App.js 写入如下代码

import React, { Component } from 'react'
// BrowserRouter 地址栏 没有 #  是需要服务端配合, 是基于html5的pushState和replaceState的，很多浏览器不支持，存在兼容性问题。
import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom'
// HashRouter 地址栏 有 #  不需要服务端配合   是浏览器端解析路由
// import { HashRouter as Router, Route, Link, Switch } from 'react-router-dom'

// 引入组件
import Login from './a'
import Admin from './b'

class App extends Component {
  render() {
    // 打印出 index.js 中 <App></App>  中间的值   比如<App>123</App>  打印出 123
    console.log(this.props.children)

    return (
      <Router>
        <div>
          <li>
            {/* link 生成路由链接 */}
            <Link to="/login">登录</Link>
          </li>
          <li>
            <Link to="/admin">主页</Link>
          </li>
          {/*  组件 <Switch> 只渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect> 否则你有几个 <Route> 都会显示 */}
          <Switch>
            {/* react 路由重定向 */}
            <Redirect exact from="/" to="/login" />
            {/* 输入 localhost:3000/ 路由指向 localhost:3000/login 去  */}
            <Route exact path="/" component={Login} />
            {/* exact=false 的时候 path 等于 /login /login/me 都能匹配   但是 exact=true 的时候 只匹配 path 等于 /login */}
            <Route exact path="/login" component={Login} />
            <Route path="/admin" component={Admin} />
          </Switch>
        </div>
      </Router>
    )
  }
}

export default App

 第五步：

启动项目，查看效果