react-router: Miss inside Miss does not work

Consider I have two apps, one in /OtherApp, but then main app which takes rest of the urls:

import * as React from "react";
import { render } from "react-dom";
import { HashRouter, Match, Miss, Link } from "react-router";

const OtherAbout = () => (
    <div>
        <h3>Other About</h3>
    </div>
)
const OtherNoMatch = ({ location }) => (
    <div>
        <h3>Other app 404</h3>
        <p>Sorry but didn’t match any pages</p>
    </div>
)
const OtherApp = ({ pathname }) => {
    return <div>
        <h2>OtherApp</h2>
        <Match exactly pattern={`${pathname}/About`} component={OtherAbout} />
        <Miss component={OtherNoMatch} />
    </div>;
}


const MainAbout = () => (
    <div>
        <h3>Main About</h3>
    </div>
)
const MainNoMatch = ({ location }) => (
    <div>
        <h3>Main app 404</h3>
        <p>Sorry but didn’t match any pages</p>
    </div>
)
const MainApp = () => (
    <div>
        <h2>Main App</h2>
        <Match exactly pattern="/About" component={MainAbout} />
        <Miss component={MainNoMatch} />
    </div>
)

class App extends React.Component<any, any> {
    render() {
        return <HashRouter>
            <div>
                <Match pattern="/OtherApp" component={OtherApp} />
                <Miss component={MainApp} />
            </div>
        </HashRouter>;
    }
}
render(<App />, document.querySelector('#root'));
document.body.style.display = "block";

/OtherApp/About -> OK (Other App’s about page as expected) /OtherApp/notfound -> OK (Other app’s 404 as expected) /About -> OK (Main apps about page as expected) /notfound -> ERROR Does not work as main apps 404. Instead it shows me empty page.

Is this a bug? The MainApp should have it’s own Miss IMO to cleanly separate the concerns.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 21 (14 by maintainers)

Most upvoted comments

Looks like maybe we need to work on the docs for exactly and how to couple nested UI to nested URLs. Unless I’m mistaken, this is what you’re after.

const App = () => (
  <Router>
    <div>
      <Title />
      <Header />
      <Match pattern="/events" component={EventLayout}/>
      <Match pattern="/users" component={UsersLayout} />
      <Miss component={NotFoundPage}/>
      <Footer />
    </div>
  </Router>
)

const EventLayout = ({ pattern }) => (
  <div>
    <Match pattern={`${pattern}/:id`} component={EventDetail}/>
    <Match exactly pattern={pattern} component={EventList} />
  </div>
)

const EventDetail = ({ pattern }) => (
  <div>
    <Match pattern={`${pattern}/confirmation`} component={EventConfirmation} />
    <Match exactly pattern={pattern} component={DetailView} />
  </div>
)

const DetailsView = ({ pattern }) => (
  <div>
    <Match pattern={`${pattern}/register`} component={Register}/>
  </div>
)

const Register = ({ pattern }) => (
  <div>
    <RegistrationForm>
      <DynamicForm />
      <Match pattern={`${pattern}/payment`} component={PaymentForm}/>
    </RegistrationForm>
  </div>
)

ryanflorence on Oct 11, 2016

@kwelch can you move your comment (https://github.com/ReactTraining/react-router/issues/3994#issuecomment-252946797) over here and delete it from there?

ryanflorence on Oct 11, 2016