我们已经使用 create-react-app 搭建了自己的react项目，并且知道了基本语法，我们会发现这些在我们实际开发中是不够的，我们不可能把一个项目所有页面全部通过显示隐藏的处理方式去做，react为我们开发提供了路由处理，如果你用过angular-router或者angular-ui-router或者vue-router，这个你就不会陌生。
路由是实现是什么呢？很简单就是根据地址的变化就显示不同的页面！
1.安装react-router
在我们的my-app下执行命令，安装这个模块：
npm install react-router
npm install react-router-dom
等待完成！使用的版本，因为版本不同，使用也会有所区别：
2.初始化的路由配置
官方文档：https://reacttraining.com/react-router/web/guides/quick-start
我们在顶部引入路由模块，在render使用：
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,Route,Link
} from 'react-router-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
//设置组件
class App extends React.Component {
render() {
return <div>我是首页</div>
}
}
ReactDOM.render(
<Router>
<div>
<ul>
<li><Link to="/">App</Link></li>
</ul>
<hr/>
<Route exact path="/" component={App}/>
</div>
</Router>,document.getElementById('root')
);
registerServiceWorker();
效果：
使用非常简单，还是jsx的写法，不过要包裹在Router的组件上，我们分析效果可知道：
<Link to="/">App</Link>解析为a标签
<Route exact path="/" component={App}/>会被设置的组件替换
3.做一个简单的官网demo
一般的官网包含：
新闻
关于我们
我们作为举例：
写好这三个组件，配置路由：
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,Link
} from 'react-router-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
//设置组件
class Home extends React.Component {
render() {
return <div>我是首页</div>
}
}
//设置组件
class News extends React.Component {
render() {
return <div>新闻页面</div>
}
}
//设置组件
class About extends React.Component {
render() {
return <div>关于我们</div>
}
}
ReactDOM.render(
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/News">News</Link></li>
<li><Link to="/About">About</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route exact path="/News" component={News}/>
<Route exact path="/About" component={About}/>
</div>
</Router>,document.getElementById('root')
);
registerServiceWorker();
4.模块化我们的组件
还是用我们的官网作为例子，我们提炼修改：
index.js:
我们会把render的代码封装到app.js
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,} from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
//组件 主要框架结构
import App from './App.js';
ReactDOM.render(
<Router>
<App />
</Router>,document.getElementById('root')
);
registerServiceWorker();
app.js
import React,{ Component } from 'react';
import {
Route,Link
} from 'react-router-dom';
//组件 各个组件
import Home from './page/Home.js';
import News from './page/News.js';
import About from './page/About.js';
class App extends Component {
render() {
return (
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/News">News</Link></li>
<li><Link to="/About">About</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route exact path="/News" component={News}/>
<Route exact path="/About" component={About}/>
</div>
);
}
}
export default App;
Home.js
各个页面：
import React,{ Component } from 'react';
class Home extends Component {
render() {
return <div>首页</div>
}
}
export default Home;
News.js
import React,{ Component } from 'react';
class News extends Component {
render() {
return <div>新闻中心</div>
}
}
export default News;
About.js
import React,{ Component } from 'react';
class About extends Component {
render() {
return <div>关于我们</div>
}
}
export default About;
我们把这些页面对应的组件放在一个page目录下，结构清晰：
