React <Switch> component to <Routes> element : how are the props passed?

Viewed 33

I'm trying to update my code from Switch to Routes and when I pass the component as element it doesn't work.

The code is :

<Routes>
    <Route path="/post/:id([\d]+)" element={<PostPage/>}/>
    <Route path="/tag/:tag/:page([\d]+)?" element={<BlogPage/>}/>
    <Route path="/:page([\d]+)?" element={<BlogPage/>}/>
    <Route path="*"
            element={() => (
                <Container>
                    <Row>
                        <h1>404</h1>
                    </Row>
                </Container> )}
    />
    
</Routes>

The content of BlogPage component is :

return (
    <div>
        <TopNav />
        <Container>
            <Row>
                <PostPageCardContainer {...this.props} />
                <SideBar />
            </Row>
        </Container>
        <Footer />
    </div> );
} }

Is my route / passed to Blogpage when :page is not defined?

Does element={<BlogPage/>} pass the props correctly given the two snippets of code above?

0 Answers
Related