React-Komposer + Flow-Router 参数

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

当我 post 这个问题时，我看到了我的错误以及如何解决它。

首先我需要订阅所有用户。

其次，我需要将参数传递给路由中的容器。

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

React-Komposer + Flow-Router 参数

React-Komposer + Flow-Router params

javascript

node.js

meteor

reactjs

flow-router