版权声明:前端菜鸟--人间草木所有 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
第五步:
启动项目,查看效果