Dfyjkt

I'm trying to get ReactiveList (from ReactiveSearch UI library) to display search results via React Router 4. I'm using query-string from npm to get that the ?q=value, or at least I think I am... Here's the codesandbox.

In search-layout.js, if I just render <Results />, ReactiveList displays the entire index, instead of query based results. If I render using <Route ... /> nothing displays - and I 'm not sure if its the way the app is structured of if I'm not doing something that React needs me to do.

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>