ReactRouter如何实现长尾关键词的精准路由匹配？

本文共计547个文字，预计阅读时间需要3分钟。

jsximport React from 'react';import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom';import { browserHistory } from 'react-router';

const peoples=[ { id: 0, username: '铁铁', age: 30, sex: 'male', address: '中国' }];

test.jsx

import React from 'react' import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom' import { browserHistory } from 'react-router' var peoples = [{ id : 0, username: '锅锅', age: 30, sex: 'male', address: 'china' }, { id : 1, username: '静静', age: 10, sex: 'female', address: 'china' }, { id : 2, username: '桃子', age: 12, sex: 'female', address: 'china' }, { id : 3, username: '宝宝', age: 2, sex: 'female', address: 'china' }, { id : 4, username: '谢', age: 10, sex: 'male', address: 'china' }, { id : 5, username: '严总', age: 40, sex: 'male', address: 'china' }, { id : 6, username: '龚二', age: 20, sex: 'male', address: 'china' }]; const findIndex = (username) => peoples.findIndex((p) => p.username === username) // 标记是否选择修改的用户 const chooseOne = { isChoosen: false, // 标记是否选择 index : 0, // 存放被选择的对象的下标 users : peoples, toChoose(index) { this.isChoosen = true this.index = index }, toEdit(user){ this.users[this.index] = user }, dropOut() { this.isChoosen = false this.user = null } } const See = ({routes}) => (

• 所有用户
• 单个用户

{routes.map((route) => ( ))} ) class All extends React.Component { handleClick(index) { alert(index) chooseOne.toChoose(index); } render() { let thiz = this return ( UsePage { chooseOne.users.map((user, index) => ( { thiz.handleClick(index) e.preventDefault() browserHistory.push('/see/one') }}> { Object.keys(user).map( (property) => {user[property]} ) } )) } ); } } const One = () => { let user = chooseOne.users[chooseOne.index] return chooseOne.isChoosen ? (

{ Object.keys(user).map( (property) =>
• {property}:{user[property]}
) }

{ e.preventDefault(); const path = `/edit` browserHistory.push(path) }}>编辑 ) : (

未选择显示用户

) } class Edit extends React.Component{ constructor (props){ super(props) this.state = chooseOne.users[chooseOne.index]; // 状态初始值 } handleChange (event){ // 输入新值 let name = event.target.name; let value = event.target.value; // alert(name + ',' + value) this.setState({name : value}) } handleClick(e){ // 点击确定 let user = this.state; chooseOne.toEdit(user); // 改变数组 e.preventDefault(); const path = `/see/all` browserHistory.push(path) } render() { let thiz = this let user = chooseOne.users[chooseOne.index] if (!chooseOne.isChoosen) { return (

未选择编辑用户

) } return ( { Object.keys(user).map((property) => ( {property}:

)) }
thiz.handleClick(e) }>确定 ); } } const routes = [ { path: '/see', exact: true, component: See, routes : [ { path: '/see/all', component: All }, { path: '/see/one', component: One } ] }, { path: '/edit', component: Edit } ] const RouteIn = (route) => ( ( )} /> ) const Test = () => (

• 查看
{/* 表示绝对匹配 */}
• 编辑用户

{routes.map((route) => ( ))} ) export default Test