使用React Router在导出的组件上进行嵌套路由

Question

I was following a CRUD tutorial that used nested Routes like the code below. I tried to omit most of the code that doesn't concern routing.

After looking up several other tutorials on nested routing I noticed they don't use exported components like I was. I also noticed that the tutorial code below exported its components using withRouter.

index.js:

...imports

ReactDOM.render(
    <BrowserRouter>
       <App />
    </BrowserRouter>,
    document.getElementById('root'),
);

App.js:

const App = ({ classes }) => (
     <CssBaseline />
     <AppHeader />
     <main className={classes.main}>
       <Home />
       <Route exact path="/" component={Home} />
       <Route exact path="/posts" component={PostManager} /> //This renders a list of posts
     </main>
   </Fragment>

PostsManager.js:

...imports

...constructor and other functions (this.savePost)

  renderPostEditor = ({ match: { params: { id } } }) => {
    if (this.state.loading) return null;
    const post = find(this.state.posts, { id: Number(id) });

    if (!post && id !== 'new') return <Redirect to="/posts" />;

    return <PostEditor post={post} onSave={this.savePost} />;
  };

  render() { //component render funciton
        ...
        <Button
          variant="fab"
          color="secondary"
          aria-label="add"
          className={classes.fab}
          component={Link}
          to="/posts/new"
        >
        <Route exact path="/posts/:id" render={this.renderPostEditor} />
  }
 ...exporting component withRouter()

The problem I got was that when I tried to access /posts/new or /posts/2 which both should match /posts/:id , I didn't get any match. The method this.renderPostEditor obviously didn't get called and PostEditor wasn't rendered.

I tried to solve the problem by removing the Route in PostsManager.js and putting in App.js. That way I got a match but it didn't render the way I wanted because this.renderPostEditor dependended on PostManager.js

My question is why I didn't get a match inside PostsManager.js but got match in App.js?

Answer 1

尝试从<Route ... />定义中删除exact道具。