路由: npm install react-router-dom --save
App.js
import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
// 导入路由模板
// Route:定义一条路由规则
// Switch/Router:在Switch/Router组件中定义多条路由规则,和Route配合使用
// HashRouter/BrowserRouter:hashHistory/browserHistory,两种路由跳转history模式
// Link:路由跳转的组件(类似vue路由中的router-link)
import {Route,HashRouter,Link,Switch} from "react-router-dom"
// 导入四个页面
import Home from "./views/Home/Home"
import User from "./views/User/User"
import Game from "./views/Game/Game"
import NotFound from "./views/NotFound/NotFound"
import Student from "./views/User/Student/Student"
import Teacher from "./views/User/Teacher/Teacher"
class App extends Component {
constructor(props){
super(props);
this.state = {
active: 0
}
}
render() {
return (
<div>
{/* HashRouter组件是路由视图,类似vue中的router-view */}
<HashRouter>
{/* 导航条 */}
<ul className="App-list">
<li><Link to="/" className={this.state.active===0?"App-active":""} index={0} onClick={this.navClick}>首页</Link></li>
<li><Link to="/user" replace className={this.state.active===1?"App-active":""} index={1} onClick={this.navClick}>用户</Link></li>
<li><Link to="/game" className={this.state.active===2?"App-active":""} index={2} onClick={this.navClick}>游戏</Link></li>
</ul>
<main>
{/* 定义路由规则:Switch中嵌套Route */}
<Switch>
{/* react中的路由匹配采用的是开头匹配法。1.可以考虑把路径path="/"放到规则的最后面 2.把匹配改为精准(严格)匹配,添加属性exact即可 */}
<Route exact path="/" component={Home} />
<Route path="/user" render={props=>
<User>
<Route exact path="/user" component={Student} />
<Route path="/user/teacher" component={Teacher} />
</User>
} />
<Route path="/game" component={Game} />
{/* 如果不设置path属性,可以匹配到任何路径,用于设置404页面(放到所有规则的最后面) */}
<Route component={NotFound}></Route>
{/* ps:Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack 原因:这个是 reactr-router 的一个提示,当前路由下的 history 不能 push 相同的路径到 stack 里。只有开发环境存在,生产环境不存在,目前还没看到官方有去掉的意思。看不惯的话可以采取一些方法关掉这个提示。*/}
{/* 解决:添加上replace <Link to={{ pathname: "/app/studyMapModule/detail" }} replace>detail</Link> */}
{/* 解决:But you should only get this warning in development. If you generate your production build correctly (using NODE_ENV=production) you shouldn't see this warning in production. */}
</Switch>
</main>
</HashRouter>
</div>
);
}
navClick = (e)=>{
this.setState({
active: e.target.getAttribute("index")*1
});
}
}
export default App;
User.js
import React, { Component } from 'react';
import './User.css';
import {Link} from "react-router-dom"
class User extends Component {
render() {
return (
<div className="root User">
<h1>用户</h1>
<input type="text"/>
<div className="User-Content">
{/* 竖向导航条 */}
<ul className="User-List">
<li><Link to="/user">学生</Link></li>
<li><Link to="/user/teacher">老师</Link></li>
</ul>
{/* 导航条对应的内容 */}
<div className="User-Children">
{this.props.children}
</div>
</div>
</div>
);
}
componentDidMount(){
console.log("user渲染完成了");
}
}
export default User;