Converter not returning the correct route

I’m trying to integrate Junctions into a fresh code base where I’m already using React Router. I’m replicating the raw example and stripped out all the react-router components to try and get this to work. One tidbit to know is that all of my urls in the entire app need to be prefixed with /wp to get this to work alongside a legacy codebase.

My issue is that when I go to /wp/about or /wp/organizations I just see the word “Home”. I dug into it and saw that the route variable in AppScreen returns the same object at every one of those locations instead of the corresponding next junction that it should return.

Here’s my code:

import createBrowserHistory from 'history/createBrowserHistory'
import { createJunction, createConverter, locationsEqual } from 'junctions'

AppScreen.junction = createJunction({
  wp: {
    next: createJunction({
      about: {},
      help: {},
      organizations: {},
    }),
  },
});
function AppScreen({ route, locate, history }) {
  const junction = AppScreen.junction;
  let content;
  switch (route ? route.key : route) {
    case 'wp':
      content = <h2>Home</h2>;
      break;

    case 'about':
      content = <h2>About</h2>;
      break;

    case 'organizations':
      content = <h2>Organizations</h2>;
      break;

    case null:
      content = <h2>Home</h2>;
      break;

    // An undefined route indicates that the converter didn't know how
    // to handle the received location
    case undefined:
      content = <h2>Not Found</h2>;
      break;
  }
  return (
    <DefaultLayout
      content={content}
      history={history}
      locate={locate}
      route={route}
    />
  )
}

class JunctionsRouter extends Component {

  componentWillMount() {
    // As an application's Junction doesn't usually change at runtime,
    // we only ever need a single application-wide converter
    this.converter = createConverter(AppScreen.junction)

    // Handle the application's initial location
    this.handleLocationChange(this.props.history.location)
  }

  componentDidMount() {
    this.unlisten = this.props.history.listen(this.handleLocationChange.bind(this))
  }

  componentWillUnmount() {
    if (this.unlisten) {
      this.unlisten()
      this.unlisten = null
    }
  }

  handleLocationChange(location) {
    // Convert the Location object emitted by our history into a Route
    // through our application Junction
    const route = this.converter.route(location)
    // The Route produced by the converter may contain informatino which
    // the received Location object doesn't, due to default parameters
    // and default branches. If this is the case, create a new Location
    // object containing the new information, and redirect to it
    const canonicalLocation = route && this.converter.locate(route)
    if (route && !locationsEqual(location, canonicalLocation)) {
      this.props.history.replace(canonicalLocation)
    }

    // Add the route to component state to trigger a re-render
    this.setState({ route })
  }

  render() {
    return (
      // Screen Components always take `route` and `locate` props, so they
      // can decide what to render, and create Locations for any Links
      // and redirects.
      //
      // In this example, we also pass a history. Usually, this would be
      // passed via context, using a <Router> or <HistoryContext> component.
      <AppScreen
        route={this.state.route}
        locate={this.converter.locate}
        history={this.props.history}
      />
    )
  }

}

const history = createBrowserHistory();
export default render((
   <JunctionsRouter
      history={history}
      junction={AppScreen.junction}
      render={AppScreen}
    />
), document.getElementById('root'));

[eriklharper]

The pathname: '/wp' param did the trick, thank you for that! After getting that /wp portion solved, I ran into the same exact problem right away though, where routes that I defined under next properties of top-level routes were not coming through in the route object.

But after looking at your “Base Location” example on this line I realized that I needed to explicitly pass the route.next junction as well as the locate function to my child components from my AppScreen component.

Once I figured that out, everything magically worked!

[eriklharper]

👍 That was it! Thanks! Good to see how these pieces fit together outside of using components that pass this all down with React context.