react路由和路由嵌套

一安装

当项目创建好之后

安装react-router react-router-dom react-router-native

cnpm i react-router-dom react-router-native --save
           

后面两个对第一有依赖，所以只用安装后面两个即可，会自动安装第一个依赖

二 导入

每一个需要使用路由的组件，都应该根据需求进行导入

function App() {
  return (
    <div className="App">
    	<BrowserRouter> //整个项目的路由都应该在这个标签内部
    	<Top></Top>
    	<div className='left'>
    		<ul>
    			<li>
    				<NavLink exact to='/' activeClassName='test'>首页</NavLink>
    			</li>
  //navlink标签，用来控制当前路由的改变和跳转，用户点击后就会触发路由的改变，
  //to属性表示要跳转的目标路由，
  //activeClassName属性表示 ，当路由被激活时的样式名称
  //exact 当前路由是否与to属性的值完全匹配，如果完全匹配则激活该标签的activeClassName，如果没有该属性，则表示，只要当前路由部分字段能匹配上to属性的内容，就激活activeClassName
    			<li>
    				<NavLink  to='/about' activeClassName='test'>关于</NavLink>
    			</li>
    		</ul>
    	</div>
    	<div className='content'>
    		<Route exact path='/' component={Index}></Route>
    		<Route path='/about' component={About}></Route>
 //route标签用来存放路由被激活时，渲染组件的位置，相当于vue中的router-view标签
 //component 用来存储该标签对应的组件，如果标签被激活，则展示component中的组件内容
 //path属性，当前路由与path中的值是否匹配。如果匹配，激活标签，否则不激活标签
 //exact 如果存在，则path中的值必须与当前路由完全匹配才能激活标签，不存在，只要当前路由有path中的值就激活标签
    	</div>
    	</BrowserRouter>
    </div>
  )
}
           

如果需要路由嵌套，只需要在本身是路由的子组件中继续完成上面的步骤就可以了，举个例子，在about组件中海油许多子组件路由

那就在about组件中完成以下代码

import React from 'react'
import {Router, Route, Link, BrowserRouter, NavLink} from 'react-router-dom'
import Company from './company.js'
import News from './news.js'
import Product from './product.js'
class About extends React.Component {
	constructor () {
		super()
		this.state = {
			work: '前端开发工程师'
		}
	}
	render () {
		return (<div>
			<ul><li><NavLink exact activeClassName='test' to='/about'>关于公司</NavLink></li>
			<li><NavLink exact activeClassName='test'  to='/about/news'>关于新闻</NavLink></li>
			<li><NavLink exact activeClassName='test' to='/about/product'>关于产品</NavLink></li>
			</ul>
		<Route exact path='/about' component={Company}></Route>
		<Route exact path='/about/news' component={News}></Route>
		<Route exact path='/about/product' component={Product}></Route>
		</div>)
	}
}
export default About