react-router笔记1:最简单的路由使用
我们已经使用 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目录下,结构清晰: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |