react-router笔记1:最简单的路由使用

前端之家收集整理的这篇文章主要介绍了react-router笔记1:最简单的路由使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们已经使用 create-react-app 搭建了自己的react项目,并且知道了基本语法,我们会发现这些在我们实际开发中是不够的,我们不可能把一个项目所有页面全部通过显示隐藏的处理方式去做,react为我们开发提供了路由处理,如果你用过angular-router或者angular-ui-router或者vue-router,这个你就不会陌生。

路由是实现是什么呢?很简单就是根据地址的变化就显示不同的页面

1.安装react-router

在我们的my-app下执行命令,安装这个模块:

  1. npm install react-router
  1. npm install react-router-dom

等待完成!使用的版本,因为版本不同,使用也会有所区别:

2.初始化的路由配置

官方文档:https://reacttraining.com/react-router/web/guides/quick-start

我们在顶部引入路由模块,在render使用:

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {
  4. BrowserRouter as Router,Route,Link
  5. } from 'react-router-dom';
  6. import './index.css';
  7. import registerServiceWorker from './registerServiceWorker';
  8.  
  9.  
  10. //设置组件
  11. class App extends React.Component {
  12. render() {
  13. return <div>我是首页</div>
  14. }
  15. }
  16.  
  17.  
  18. ReactDOM.render(
  19. <Router>
  20. <div>
  21. <ul>
  22. <li><Link to="/">App</Link></li>
  23. </ul>
  24. <hr/>
  25. <Route exact path="/" component={App}/>
  26. </div>
  27. </Router>,document.getElementById('root')
  28. );
  29.  
  30. registerServiceWorker();

效果

使用非常简单,还是jsx的写法,不过要包裹在Router的组件上,我们分析效果可知道:

<Link to="/">App</Link>解析为a标签

<Route exact path="/" component={App}/>会被设置的组件替换

3.做一个简单的官网demo

一般的官网包含:

首页

新闻

关于我们

我们作为举例:

写好这三个组件,配置路由:

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {
  4. BrowserRouter as Router,Link
  5. } from 'react-router-dom';
  6. import './index.css';
  7. import registerServiceWorker from './registerServiceWorker';
  8.  
  9.  
  10. //设置组件
  11. class Home extends React.Component {
  12. render() {
  13. return <div>我是首页</div>
  14. }
  15. }
  16. //设置组件
  17. class News extends React.Component {
  18. render() {
  19. return <div>新闻页面</div>
  20. }
  21. }
  22. //设置组件
  23. class About extends React.Component {
  24. render() {
  25. return <div>关于我们</div>
  26. }
  27. }
  28.  
  29. ReactDOM.render(
  30. <Router>
  31. <div>
  32. <ul>
  33. <li><Link to="/">Home</Link></li>
  34. <li><Link to="/News">News</Link></li>
  35. <li><Link to="/About">About</Link></li>
  36. </ul>
  37. <hr/>
  38. <Route exact path="/" component={Home}/>
  39. <Route exact path="/News" component={News}/>
  40. <Route exact path="/About" component={About}/>
  41. </div>
  42. </Router>,document.getElementById('root')
  43. );
  44.  
  45. registerServiceWorker();

4.模块化我们的组件

还是用我们的官网作为例子,我们提炼修改

index.js:

我们会把render的代码封装到app.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {
  4. BrowserRouter as Router,} from 'react-router-dom';
  5. import registerServiceWorker from './registerServiceWorker';
  6. //组件 主要框架结构
  7. import App from './App.js';
  8.  
  9. ReactDOM.render(
  10. <Router>
  11. <App />
  12. </Router>,document.getElementById('root')
  13. );
  14.  
  15. registerServiceWorker();

app.js

页面,这里我们有我们的导航和变化显示结构

  1. import React,{ Component } from 'react';
  2. import {
  3. Route,Link
  4. } from 'react-router-dom';
  5.  
  6. //组件 各个组件
  7. import Home from './page/Home.js';
  8. import News from './page/News.js';
  9. import About from './page/About.js';
  10.  
  11.  
  12. class App extends Component {
  13. render() {
  14. return (
  15. <div>
  16. <ul>
  17. <li><Link to="/">Home</Link></li>
  18. <li><Link to="/News">News</Link></li>
  19. <li><Link to="/About">About</Link></li>
  20. </ul>
  21. <hr/>
  22. <Route exact path="/" component={Home}/>
  23. <Route exact path="/News" component={News}/>
  24. <Route exact path="/About" component={About}/>
  25. </div>
  26. );
  27. }
  28. }
  29.  
  30. export default App;

Home.js

各个页面

  1. import React,{ Component } from 'react';
  2.  
  3. class Home extends Component {
  4. render() {
  5. return <div>首页</div>
  6. }
  7. }
  8.  
  9. export default Home;

News.js

  1. import React,{ Component } from 'react';
  2.  
  3. class News extends Component {
  4. render() {
  5. return <div>新闻中心</div>
  6. }
  7. }
  8.  
  9. export default News;

About.js

  1. import React,{ Component } from 'react';
  2.  
  3. class About extends Component {
  4. render() {
  5. return <div>关于我们</div>
  6. }
  7. }
  8.  
  9. export default About;

我们把这些页面对应的组件放在一个page目录下,结构清晰:

猜你在找的React相关文章