React-router with TypeScript, match parameters are always undefined

Question

I want to do this kind of routing: localhost:3000/function/page where function tells the app which function should take care of this url, and page tells which part we are inside a specific function.

const App: React.FC = () => {
  return (
    <Router>
      <div className="App">
        <Route component={SignUp} path="/signup/:page" />
      </div>
    </Router>
  );
}

interface MatchProps extends RouteComponentProps<any> {
  page: string;
}

class SignUp extends React.Component<MatchProps> {
  public render(){
    console.log(this.props.page)
  }
}

Then I access this page via localhost:3000/signup/1, in console I can only get an undefined result.

freedev111 · Accepted Answer · 2019-08-07 03:50:17Z

1

This is the solution:

import { match } from "react-router-dom";

interface DetailParams {
  id: string;
}

interface DetailsProps {
  required: string;
  match?: match<DetailParams>;
}


class Signup extends React.Component<DetailsProps, any> {
  render(){
    const match = this.props.match;
    console.log(match.params.page)
  }
}

answered Aug 7, 2019 at 3:50

freedev111

1324 bronze badges

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

Comments

Desmond · Accepted Answer · 2019-08-07 03:10:39Z

0

Use this.props.match.params.page instead of this.props.page solves the problem.

But it's still not perfect. this.props.match.params.page has a type as any. How can I restrict it.

answered Aug 7, 2019 at 3:10

Desmond

7871 gold badge7 silver badges20 bronze badges

2 Comments

ggorlen Over a year ago

I recommend asking follow-up questions by editing your post, or creating a new question.

Desmond Over a year ago

@ggorlen sure. Thanks. I’m searching for existing answers first.

Collectives™ on Stack Overflow

React-router with TypeScript, match parameters are always undefined

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related