06/react路由
Posted lucy-xyy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了06/react路由相关的知识，希望对你有一定的参考价值。
01-Context-
<div id=‘root‘></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> //context作用避免每一层手动传props class App extends React.Component{ render() { return( <div><div> ) } } ReactDOM.render(<App />,document.getElementById(‘root‘)) </script>
02-react-router-
<!-- v4的react Router插件，react-router-dom 单页内视图切换： 视图容器/路径配置 --> <div id=‘root‘></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./react-router-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> // const Route = ReactRouterDOM.Route // const Router=ReactRouterDOM.BrowserRouter const {Route,HashRouter:Router} = ReactRouterDOM class App extends React.Component{ render(){ return( <Router> <div> <p> <a href="#/home">首页</a> <a href="#/about">关于</a> </p> {/*上面是导航，下面就是容器了，react里完全是组件化的，不用像vue那样是配，而是把所有可能渲染的内容都放在下面 用Route组件列举所有的路由记录，一条路由记录就是一个组件，用替换组件占位，不能用自己的组件去占位，而要用它给我们的Route组件去占位 这个Route不是React的，是react-router-dom的，可能不是全局的，肯定是定义在某个对象上的，就像Component是定义在React上--》React.Component console.log(ReactRouterDOM) //ReactRouterDOM就是react-router-dom所定义的全局对象 一般情况下我们这样去取值 const Route = ReactRouterDOM.Route */} {/* Route怎么知道我们要渲染的是HOME组件呢？Route上有一些属性，例如pat,componet就是要渲染的组件是什么 当你路径切换到home的时候，Route组件就会被Home组件替换掉 只有Route还不够，React会不会去根据Route去匹配？在vue里面匹配默认是hash匹配 但在react中没有默认匹配 要自己指定 告诉是什么模式匹配否则跑不起来，报错：Uncaught Error: Invariant failed: You should not use <Route> outside a <Router> 而且Route要用根元素包裹一下才有效果 */} {/*Router也要赋值，全局上是没有的 也在ReactRouterDOM里 Router在ReactRouterDOM里是抽象类，创造不出实例的 对V4来说是不能直接用的，v4要选择具体的类，具体的有4个Router对象 MemoryRouter ：用内存的方式存路径，不怎么用。一般和React native一起用 StaticRouter:静态路径，整个路径都不变 一般也不用 BrowserRouter:利用浏览器历史管理来实现。vue中吧mode改成history也就是这种 HashRouter:用hash值来做历史管理。vue中的hash const Router=ReactRouterDOM.BrowserRouter Router组件内必须有根元素 V2,V3里的根元素必须是Route,v4里可以随便什么<div>就可以 Router可以放最外层保证了几个点 1.要在Route外面 2.要有根元素 点击关于 首页组件就会被销毁掉 用BrowserRouter无法匹配 主要是因为a标签 改用Link */} <Route path="/home" component={Home}></Route> <Route path="/about" component={About}></Route> </div> </Router> ) } } function Home(props){ return(<h1>首页</h1>) } function About(props){ return(<h1>关于。。。</h1>) } ReactDOM.render(<App />,document.getElementById(‘root‘)) </script>
03react-router
<!-- v4的react Router插件，react-router-dom 单页内视图切换： 视图容器/路径配置 --> <div id=‘root‘></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./react-router-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> // const Route = ReactRouterDOM.Route // const Router=ReactRouterDOM.BrowserRouter //用LINK 不管HASH还是Browser模式都能用 同时也是要导入 const {Route,HashRouter:Router,Link} = ReactRouterDOM class App extends React.Component{ render(){ return( <Router> <div> <p> <Link to="/home">首页</Link> <Link to="/about">关于</Link> </p> <Route path="/home" component={Home}></Route> <Route path="/about" component={About}></Route> </div> </Router> ) } } function Home(props){ return(<h1>首页</h1>) } function About(props){ return(<h1>关于。。。</h1>) } ReactDOM.render(<App />,document.getElementById(‘root‘)) </script>
03react-router2
<div id=‘root‘></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./react-router-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> /* ReactRouterDOM中的组件说明： 1）Router:是所有路由组件共用的底层接口，相当于容器，导航不一定放里面，但Route一定放里面，用于根据location（window.location)的值更新容器 注意：Router里面的内容必须要有根元素，根元素类型不限 v2和v3根元素必须是Route Router组件有： BrowserRouter:用html5的历史管理来保持组件和url的同步 HashRouter:用URL的hash值来保持组件和url同步 MemooryRouter：在内存中保存url历史记录，一般在测试环境下 StaticRouter：地址从不改变 2）Route:作用是当windoe.location的url和所设置的path属性匹配时渲染所指定的组件。第一个属性就是path（可以是字符串也可以是对象）,第二个就是指定要渲染的组件（可以写component或render函数或children 一般情况下不做特殊处理都用component 3)Link:a标签的增强版本，可以用来实现页面跳转 无法修改样式 */ const {Route,HashRouter:Router,Link} = ReactRouterDOM class App extends React.Component{ render(){ return( <Router> <div> <p> <Link to="/home">首页</Link> <Link to="/about">关于</Link> </p> {/*用Router组件列举所有的路由记录 Route组件必须有Router父组件 */} <Route path="/home" component={Home}></Route> {/* <Route path="/home" render={()=><h2>主页</h2>}></Route> */} <Route path="/about" component={About}></Route> </div> </Router> ) } } function Home(props) { //每一个Route挂载的组件 props上都有3个对象 //history 可以回退，跳转 //location 当前的地址对象 当前的地址信息 console.log(props) return(<h2>首页。。。<button onClick={()=>{props.history.push(‘/about‘)}}>跳转</button></h2>) } function About(props) { return(<h2>关于</h2>) } ReactDOM.render(<App/>,document.getElementById(‘root‘)) </script>
04-路由重定向
<div id=‘root‘></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./react-router-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> const {Route,HashRouter:Router,Link,Switch} = ReactRouterDOM class App extends React.Component{ //Route默认匹配的原理：url上有个path Route上也有个path 这两个要对比看是否匹配成功，实际上并不是看她两是否完全相等。以/为一组来匹配，从头往后匹配，只要头部组匹配能成功就渲染 //Switch:若果有多个匹配的路由组件，Switch让其内只渲染第一个匹配成功的路由，但是会一直匹配成第一个 //exact:精确匹配 但有这个有无法一开始就显示首页 这时候要重定向 //Redirect:实现重定向，from="/home" to="/" 当Route上的都不匹配时就走到Redirect或这指定路径走到哪里就跳到另一个路径 render(){ return( <Router> <div> <p> <Link to="/">首页</Link> <Link to="/ab">包含</Link> <Link to="/ab/out">关于</Link> </p> <Switch> {/* exact 属性表示进行完全匹配 strict 属性 如果为true 就认为‘/about‘和‘/about/‘是不一样的 */} <Route path="/" exact component={Home}></Route> <Route path="/ab" component={Ab}></Route> <Route path="/ab/out" component={About}></Route> {/*重定向*/} <Redirect to="/"></Redirect> </Switch> </div> </Router> ) } } function Home(props) { console.log(props) return(<h2>首页。。。<button onClick={()=>{props.history.push(‘/about‘)}}>跳转</button></h2>) } function About(props) { return(<h2>关于</h2>) } function Ab(props) { return(<h2>包含</h2>) } ReactDOM.render(<App/>,document.getElementById(‘root‘)) </script>
05-路由嵌套
<div id=‘root‘></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./react-router-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> const {Route,HashRouter:Router,Link,Switch,Redirect} = ReactRouterDOM class App extends React.Component{ render(){ return( <Router> <div> <p> <Link to="/home">首页</Link> <Link to="/about">关于</Link> </p> <Switch> <Route path="/home" exact component={Home}></Route> <Route path="/about" component={About}></Route> <Redirect to="/home" component={Home}></Redirect> </Switch> </div> </Router> ) } } class Home extends React.Component{ render(){ return( <Router> <div> <p> <Link to="/home/cloth">衣服</Link> <Link to="/home/food">食品</Link> </p> <Switch> <Route path="/home/cloth" render={(props)=>(<h3>衣服</h3>)}></Route> <Route path="/home/food" render={(props)=>(<h3>食物</h3>)}></Route> </Switch> </div> </Router> ) } } function About(props) { return(<h2>关于</h2>) } ReactDOM.render(<App/>,document.getElementById(‘root‘)) </script>
06-NavLink
<style> .active{ color:red } .about_active{ color: green } </style> </head> <body> <div id=‘root‘></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./react-router-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> //NavLink : 在Link的功能基础上，如果当前当行被触发，多了个class=active Link和NavLink渲染出来的都是a标签 //修改类名等 //NavLink所具有的属性有： // 1）activeClassName:设置触发时所添加的类名，默认值为active // 2)activeStyle:当前导航触发时所添加的行间样式 一般有className就不用style 都是激活时加的样式 // 3）exact:值为true，则只有当前NavLink指定的路径和url中完全匹配时才会给对应的NavLink加 const {Route,HashRouter:Router,Link,NavLink,Switch,Redirect} = ReactRouterDOM class App extends React.Component{ render(){ return( <Router> <div> <p> <NavLink to="/home">首页</NavLink> <NavLink to="/about" activeClassName="about_active">关于</NavLink> </p> <Switch> <Route path="/home" exact component={Home}></Route> <Route path="/about" component={About}></Route> <Redirect to="/home" component={Home}></Redirect> </Switch> </div> </Router> ) } } class Home extends React.Component{ render(){ return( <Router> <div> <p> <Link to="/home/cloth">衣服</Link> <Link to="/home/food">食品</Link> </p> <Switch> <Route path="/home/cloth" render={(props)=>(<h3>衣服</h3>)}></Route> <Route path="/home/food" render={(props)=>(<h3>食物</h3>)}></Route> </Switch> </div> </Router> ) } } function About(props) { return(<h2>关于</h2>) } ReactDOM.render(<App/>,document.getElementById(‘root‘)) </script>
07-动态路由
<style> .active{ color:red } .about_active{ color: green } </style> </head> <body> <div id=‘root‘></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./react-router-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> //不同的url共用相同的结构模板的时候，用到动态路由 相当于一个组件匹配多个路径,样式结构一样 就是数据不一样 const {Route,HashRouter:Router,Link,NavLink,Switch,Redirect} = ReactRouterDOM class App extends React.Component{ render(){ return( <Router> <div> <p> <NavLink to="/">首页</NavLink> <NavLink to="/about" activeClassName="about_active">关于</NavLink> <NavLink to="/product" activeClassName="about_active">产品</NavLink> </p> <Switch> <Route path="/" exact render={(props)=>(<h1>首页----{props.match.url}</h1>)}></Route> <Route path="/:myPath" component={MyComponent}></Route> </Switch> </div> </Router> ) } } class MyComponent extends React.Component{ componentWillMount(){ console.log(this.props) //请求数据 fetch(‘./data/${}.json‘) } render(){ return( <div> <h2>aaaa</h2> <p>bbb</p> </div> ) } } ReactDOM.render(<App/>,document.getElementById(‘root‘)) </script>
以上是关于06/react路由的主要内容，如果未能解决你的问题，请参考以下文章
Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段