Handle a Route that can match an exact path or a path with parameter with react-router

Question

I work with react-router v4, and I like to merge different route to a single one. Is there a way to simplify the following code:

<Route exact path="/" component={myPage} />
<Route path="/a/:a" component={myPage} />
<Route path="/b/:b" component={myPage} />

MyPage should be answering for /, /a/foo, but not for c/bar.

hi, have a look at this question: https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router — makuno, Sep 18 '18 at 16:34
@user2760868 my problem is with the `/` path that catch everything if it is not coupled with the `exact` attribute. — tzi, Sep 18 '18 at 17:02

score 0 · Answer 1 · answered Sep 18 '18 at 16:34

0

Define exact path and also assign a key prop when you use same component for different routes:

<Route exact path="/" key="root" component={myPage} />
<Route exact path="/a/:a" key="a-a" component={myPage} />
<Route exact path="/b/:b" key="b-b" component={myPage} />

answered Sep 18 '18 at 16:34

Bhojendra Rauniyar

73,156
29
131
187

I didn't know for th key. Thanks. It doesn't solve my problem. To avoid rerendering, I need to have a single `` – tzi Sep 18 '18 at 16:57
You should be checking with is path params inside your component to do so. – Bhojendra Rauniyar Sep 18 '18 at 17:02

Handle a Route that can match an exact path or a path with parameter with react-router

1 Answers1