How to make path param to be optional in react router dom(v4)?

Question

This is my code which I don't think is right and redundant:

<BrowserRouter>
 <Route exact={true} path="/" component={App}/>
 <Route path="/:filter" component={App}/>
</BrowserRouter>

I think exact={true} is redundant since I can simply do path="/(:filter)" in previous react router versions? I don't wanna use history.push :(

This is how I usd my NavLink in my Footer Component:

const Footer = () => (
  <p>
    Show:
    {" "}
    <FilterLink filter="all"> 
      All 
    </FilterLink>
    {", "}
    <FilterLink filter="active">
      Active
    </FilterLink>
    {", "}
    <FilterLink filter="completed">
      Completed
    </FilterLink>
  </p>
);

and my FilterLink:

const FilterLink = ({ filter, children }) => (
  <NavLink 
    to={ filter === 'all' ? '' : filter }
    activeStyle={{
      textDecoration: 'none',
      color: 'red'
    }}
  >
  {children}
  </NavLink>
);

The path is changing, example: localhost:3000/active but the style has no effect, but it affects the all? when I am on localhost:3000/?

Shubham Khatri · Accepted Answer · 2017-06-09 16:32:53Z

2

In react-router v4 you can defined an optional path parameter like

<BrowserRouter>
 <Route path="/:filter?" component={App}/>
</BrowserRouter>

Path parameter must be defined in a manner which is as per the npm package path-to-regexp understands as mentioned in the react-router docs

answered Jun 9, 2017 at 16:32

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

gpbaculio Over a year ago

when I am applying activeStyle, it is not working on my localhost:3000 and not on other filters?

Shubham Khatri Over a year ago

what do you mean by when you are applying activeStyle

Shubham Khatri Over a year ago

If you don't add active style then

gpbaculio Over a year ago

all have the same style, just adds underline below, but I want to add activeStyle which I cannot accomplish

Shubham Khatri Over a year ago

maybe <NavLink to={ filter === 'all' ? '/' : '/' + filter } activeStyle={{ textDecoration: 'none', color: 'red' }} >

|

Collectives™ on Stack Overflow

How to make path param to be optional in react router dom(v4)?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related