React-Komposer +流路由器參數

Question

我是Meteor的新人，並且制作了社交媒體。 我想要的是一個用戶可以訪問另一個用戶個人資料，並從他那里查看播放列表，等等。我使用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

當我發布問題時，我看到了我的錯誤以及如何解決。

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

其次，我需要將參數傳遞給路線中的容器。

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);