react路由和路由嵌套

一安裝
當項目創建好之後
安裝react-router react-router-dom react-router-native

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

後面兩個對第一有依賴，所以只用安裝後面兩個即可，會自動安裝第一個依賴

二 導入

import {Router, Route, Link, BrowserRouter, NavLink} from 'react-router-dom'

每一個需要使用路由的組件，都應該根據需求進行導入

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