React-Komposer +流量路由器參數

Question

我是一個新的流星，我做了一個社交媒體。我想要的是，用戶可以訪問其他用戶配置文件並查看他的播放列表等。我使用React-Komposer作爲數據，並使用Flow-Router作爲路由。

現在我在我的路線卡住了參數。我給了Flow-Router和那個工作的用戶名參數，但看起來不像是爲容器工作。

ProfilePagesContainer.js

import { Meteor } from 'meteor/meteor'; 
import { composeWithTracker, composeAll } from 'react-komposer'; 
import { useDeps } from 'react-simple-di'; 
import ProfilePages from '../../ui/pages/ProfilePages'; 

const composer = (pageUsername, onData) => { 
    const userProfileHandle = Meteor.subscribe('user.single', pageUsername); 
    if (userProfileHandle.ready()) { 
    const profileUser = Meteor.users.find({ username: pageUsername }).fetch(); 
    onData(null, profileUser); 
    } else { 
    // UI component get a prop called `loading` as true 
    onData(null, { loading: true }); 
    } 
}; 

export default composeAll(
    composeWithTracker(composer), 
    useDeps() 
)(ProfilePages); 

routes.js

import React from 'react'; 
import { Meteor } from 'meteor/meteor'; 
import { mount } from 'react-mounter'; 
import { FlowRouter } from 'meteor/kadira:flow-router'; 

// Load the layout 
import MainLayout from '../../ui/layouts/MainLayout'; 
import LoginLayout from '../../ui/layouts/LoginLayout'; 

// Import pages 
import WelcomePages from '../../ui/pages/WelcomePages'; 
import LoginPages from '../../ui/pages/LoginPages'; 
import SignUpPages from '../../ui/pages/SignUpPages'; 

import ProfilePagesContainer from '../../ui/containers/ProfilePagesContainer'; 

FlowRouter.route('/', { 
    name: 'default.route', 
    triggersEnter: [(context, redirect) => { 
    if (!Meteor.userId()) { 
     redirect('/login'); 
    } else { 
     redirect('/home'); 
    } 
    }], 
}); 

FlowRouter.route('/login', { 
    name: 'login.route', 
    action() { 
    mount(LoginLayout, { 
     content: (<LoginPages />), 
    }); 
    }, 
}); 

FlowRouter.route('/signup', { 
    name: 'signup.route', 
    action() { 
    mount(LoginLayout, { 
     content: (<SignUpPages />), 
    }); 
    }, 
}); 

FlowRouter.route('/home', { 
    name: 'home.route', 
    action() { 
    mount(MainLayout, { 
     content: (<WelcomePages />), 
    }); 
    }, 
}); 

FlowRouter.route('/profile/:username', { 
    name: 'profile.route', 
    action({ username }) { 
    mount(MainLayout, { 
     content: (<ProfilePagesContainer />), 
     pageUsername: username, 
    }); 
    }, 
}); 

publications.js

import { Meteor } from 'meteor/meteor'; 
import { check } from 'meteor/check'; 

Meteor.publish('userData', function userData() { 
    return Meteor.users.find({ 
    _id: this.userId, 
    }); 
}); 

Meteor.publish('user.single', username => { 
    check(username, String); 
    const selector = { username }; 
    return Meteor.users.find({ selector }).fetch(); 
}); 

Answer 1

當我發表我看到我的錯誤，以及如何解決它的問題。

首先，我需要訂閱所有用戶。

第二我需要將params傳遞到路徑中的容器。

routes.js

import React from 'react'; 
import { Meteor } from 'meteor/meteor'; 
import { mount } from 'react-mounter'; 
import { FlowRouter } from 'meteor/kadira:flow-router'; 

// Load the layout 
import MainLayout from '../../ui/layouts/MainLayout'; 
import LoginLayout from '../../ui/layouts/LoginLayout'; 

// Import pages 
import WelcomePages from '../../ui/pages/WelcomePages'; 
import LoginPages from '../../ui/pages/LoginPages'; 
import SignUpPages from '../../ui/pages/SignUpPages'; 

import ProfilePagesContainer from '../../ui/containers/ProfilePagesContainer'; 

FlowRouter.route('/', { 
    name: 'default.route', 
    triggersEnter: [(context, redirect) => { 
    if (!Meteor.userId()) { 
     redirect('/login'); 
    } else { 
     redirect('/home'); 
    } 
    }], 
}); 

FlowRouter.route('/login', { 
    name: 'login.route', 
    action() { 
    mount(LoginLayout, { 
     content: (<LoginPages />), 
    }); 
    }, 
}); 

FlowRouter.route('/signup', { 
    name: 'signup.route', 
    action() { 
    mount(LoginLayout, { 
     content: (<SignUpPages />), 
    }); 
    }, 
}); 

FlowRouter.route('/home', { 
    name: 'home.route', 
    action() { 
    mount(MainLayout, { 
     content: (<WelcomePages />), 
    }); 
    }, 
}); 

FlowRouter.route('/profile/:username', { 
    name: 'profile.route', 
    action({ username }) { 
    mount(MainLayout, { 
     content: (<ProfilePagesContainer pageUsername={username} />), 
    }); 
    }, 
}); 

publications.js

import { Meteor } from 'meteor/meteor'; 
// import { check } from 'meteor/check'; 

Meteor.publish('userData', function userData() { 
    return Meteor.users.find({ 
    _id: this.userId, 
    }); 
}); 

// Meteor.publish('user.single', username => { 
// check(username, String); 
// const selector = { username }; 
// return Meteor.users.find({ selector }).fetch(); 
// }); 

Meteor.publish('all.users',() => Meteor.users.find({})); 

ProfilePagesContainer.js

import { Meteor } from 'meteor/meteor'; 
import { composeWithTracker, composeAll } from 'react-komposer'; 
import { useDeps } from 'react-simple-di'; 
import ProfilePages from '../../ui/pages/ProfilePages'; 

const composer = ({ pageUsername }, onData) => { 
    const userProfileHandle = Meteor.subscribe('all.users'); 
    if (userProfileHandle.ready()) { 
    const profileUser = Meteor.users.find({ username: pageUsername }).fetch(); 
    onData(null, profileUser); 
    } else { 
    // UI component get a prop called `loading` as true 
    onData(null, { loading: true }); 
    } 
}; 

export default composeAll(
    composeWithTracker(composer), 
    useDeps() 
)(ProfilePages);