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