React webapp路由跳转
- Router下面只能包含一个盒子标签,类似这里的div。
Link,NavLink代表一个链接,相当于一个a标签。需要有一个to表示地址。
Route,代表路由界面,path代表路径,component代表路径所对应的界面。- 项目入口 》Router包括路由组件和底部菜单组件 》 路由组件里面引入所有需要用到的路由(<Route>),底部菜单用<Link>组件进行跳转。
- 工程创建完成后修改根目录index.js文件,使其不再针对默认的<APP>组件,使其指向我们创建的路由组件。 结构为一个<Router>标签,包含一个路由组件一个底部标签
import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter as Router } from 'react-router-dom'; import './index.css'; // import App from './App'; //之前的路由 import Routes from './router'; //替换路由 import Bottomtab from './page/bottomtab'; //底部 import * as serviceWorker from './serviceWorker'; ReactDOM.render( <div> <Router> {/* //容器盒子 */} <Routes></Routes> <Bottomtab></Bottomtab> </Router> </div>, document.getElementById('root') ); serviceWorker.unregister();
- 创建路由文件,将需要的组件一一引入。底部菜单组件不需要引入,这里面只是用<Route>组件。
-
import React,{Component} from 'react'; import {Route} from 'react-router-dom'; import Home from '../src/page/home/home'; import App from './App'; import Sort from '../src/page/sort/sort'; import Surprise from '../src/page/surprise/surprise'; import shopCar from '../src/page/shopCar/shopCar'; import Mine from '../src/page/mine/mine'; import TestModule from './page/testmodule/testmodule'; class Routes extends Component{ render(){ return( <div className="wrapper" > <div className='routes-list' style={ {height:'100%'}}> <Route exact path='/App' component={App} ></Route> <Route exact path='/Home' component={Home}></Route> <Route exact path='/' component={App}></Route> <Route exact path='/Sort' component={Sort}></Route> <Route exact path='/Surprise' component={Surprise}></Route> <Route exact path='/shopCar' component={shopCar}></Route> <Route exact path='/Mine' component={Mine}></Route> <Route exact path='/TestModule' component={TestModule}></Route> </div> </div> ) } } export default Routes
- 创建底部菜单组件 ,其中只使用<NavLink>组件 <Link>组件也可以。
import React, { Component } from 'react'; import {NavLink} from 'react-router-dom'; class bottomTab extends Component{ constructor(){ super(); this.state={ } } render(){ return( <div className='routes-list'> <NavLink to="/Home">Home</NavLink> <NavLink to="/Sort">Sort</NavLink> <NavLink to="/Surprise">Surprise</NavLink> <NavLink to="/shopCar">shopCar</NavLink> <NavLink to="/Mine">Mine</NavLink> </div> ) } } export default bottomTab;