ReactiveList不会通过React Router显示搜索结果

Question

我正试图从ReactiveSearch UI库中获取ReactiveList以通过React Router 4显示搜索结果。我正在使用npm的查询字符串来获取？q = value，或者至少我认为我是...这是codesandbox。

在search-layout.js中，如果我仅渲染<Results />，则ReactiveList将显示整个索引，而不是基于查询的结果。如果我使用<Route ... />进行渲染，则不会显示任何内容-如果我没有做React需要我做的事情，我不确定应用程序的结构方式。

class SearchLayout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      userQuery: ""
    };
  }

  componentDidMount(value) {
    // console.log("vvv" + value);
    this.setState({ value: this.state.value });
    // const parseUrl = queryString.parseUrl(this.props.location)
    const fixedQuery = this.props.location.search.replace(/['"]+/g, "");
    const userQuery = queryString.parse(fixedQuery);
    // console.log(JSON.stringify(userQuery.q));
    // this.setState({ userQuery: userQuery.q });
    // console.log("This is from query-string: ", userQuery);
  }

  render() {
    const { value } = this.state;
    // console.log("This is value: ", value);
    const { userQuery } = this.state; // query string
    // console.log("This is the userQuery: ", userQuery);
    const { match } = this.props; // path
    // console.log("This is match props: ", match);

    return (
      <div>
        <Route
          path={`${match.path}?q=${userQuery}`}
          render={props => <Search {...props} />}
        />
        {/* <Route path={`${match.path}?q=${userQuery}`} component={Results} /> */}
        {match.path}
        <br />
        {match.url}
        <br />
        {`{match.path}?q="${userQuery}"`}
        {/* <Results /> */}
      </div>