How to get parameters in a component in dom v4 response router?

Question

I have this code:

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

The filter parameter or `` in the root, presumably, should be based on the details of the application components on previous versions of the reacting router?

This is my code in my application:

const App = ({params}) => {
    return ( // destructure params on props
      <div>
        <AddTodo />
        <VisibleTodoList 
            filter={params.filter || 'all'} // i want to git filter param or assign 'all' on root 
        />
        <Footer />
      </div>
    );
}

I ran this.props.match.params on the console, but it doesn't have it? to help?

Answer 1

, Redux Egghead.io, , , , . , React Router v4, , .

⚠️ . , , , react-router-dom (4.1.1 ). - - v4.

-, , React Router v4, , , <Switch>.

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

-, , React Router v4 params , match prop .

const App = ({ match }) => {
    return (
      <div>
        <AddTodo />
        <VisibleTodoList filter={match.params.filter || 'all'} />
        <Footer />
      </div>
    )
}

: mapStateToProps HoC withRouter, Egghead, .

, .

• mapStateToProps
• withRouter soluiton

, , ( ).

Answer 2

React Router v4 . . <Switch>, , :

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

. match, params ( , , ):

const App = ({match}) => {
    return ( 
      <div>
        <AddTodo />
        <VisibleTodoList 
            filter={match.params.filter || 'all'} 
        />
        <Footer />
      </div>
    );
}

React Router V4 docs

Answer 3

react-router documentation, props.match.params , .

,

const App = ({match}) => {
    ...
    <VisibleTodoList 
        filter={match.params.filter || 'all'}
    />
    ...
}

Answer 4

, , , , location.pathname, . , param - , , || , , , , location.pathname. , regexp.