react-router and typescript “match” issue in Link to routing

Question

As I'm new to both react and typescript I've read several articles about how to get the "match" property from react-router working using typescript and I haven't been able to successfully do it. I have no parameters I am passing, I just want to be able to use the match.url of react-router.

So the examples I am seeing is that the field in the login.tsx file should use {match.url}. I tried the react 4 router demo here: https://codesandbox.io/s/nn8x24vm60?from-embed where they used { ${match.url}/register } but that didn't work either. Then I saw some posts where people said you had to declare an interface but it was split between RouteComponent and Route and most were dealing with parameters. Basically all I want it to do is when I click the link to switch to the register route(it's in register.tsx - not shown here as it's a simple file with just a header on it).

Currently its throwing the following eror:

    "Error  TS2739  (TS) Type '{}' is missing the following properties from type
 'Readonly<MyProps & RouteComponentProps<{}, StaticContext, any>>': register, history, location, match"

Any help as to what I'm doing wrong would be appreciated.

app.tsx file:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Redirect, Link, Route, Switch } from 'react-router-dom';
import { Home } from './home';
import { Register } from './register';
import { NavBar } from './navbar';

export class App extends React.Component<{}, {}> {
    render() {
        return (
            <Router>
                <div>
                    <NavBar/>            
                    <Switch>
                        <Route path="/" component={Home} />
                        <Route path="/register" component={Register} />               
                    </Switch>
                </div>
            </Router>
        );
    }
}

ReactDOM.render(, document.getElementById('root'));

home.tsx file:

import React from 'react';
import { Login } from './login';
import { Jumbotron } from 'react-bootstrap';

const jumboStyle = {
    background: 'lightgray',
    height: '20%',
    width: '40%',
    margin: 'auto'
};


export class Home extends React.Component<{}, {}> {

    render() {
        return (

            <div>
                < Jumbotron style={jumboStyle}>
                    <h1>Welcome to the new League!</h1>
                    <h4>Please log in with your username and password to continue</h4>
                    <Login />
                    <br />
                    <br />
                </Jumbotron>

            </div>

        );
    }
}

login.tsx file:

import React from 'react';
import {  Link, RouteComponentProps } from "react-router-dom";
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import { Alert } from 'react-bootstrap';
import { Register } from './register';

interface IState {
    [key: string]: any; // or the type of your input
} 

interface MyProps {
    register: Register
}
const styles = {
    background: 'lightblue'
};

export class Login extends React.Component<MyProps & RouteComponentProps, IState> {

    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
            authorized: false

        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

    }


    handleChange(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        this.setState({
            [name]:value
        });
    }
    handleSubmit(event) {
      //we are goingto submit the form to the database
        event.prevent.default();
    }

    render() {

        return (

            <div>
                <form noValidate autoComplete="off" onSubmit={this.handleSubmit} style={{ textAlign: 'center' }}>
                    <TextField
                        id="username"
                        name="username"
                        label="UserName"
                        helperText="Enter your Username"
                        value={this.state.username}
                        onChange={this.handleChange}
                        required={true}
                        style={styles}
                    />

                    <br />
                    <TextField
                        id="password"
                        name="password"
                        type="password"
                        helperText="Enter your password"
                        label="Password"
                        onChange={this.handleChange}
                        required={true}
                        style={styles}
                    />
                    <br />
                    <br />
                    <br/>
                    <Button
                        type="submit"
                        value="Submit"
                        variant="contained"
                        color="primary"

                    >Submit</Button>   
                    <br />
                    <br/>
                    <Alert variant="info">
                        <Alert.Heading>Don't Have An Account Setup?</Alert.Heading>
                        <div>
                            <Link to={`${this.props.match.url}/register`}>Register Here</Link>
                        </div>
                    </Alert>
                </form>


            </div>

        )

    }
}

Answer 1

You need to pass props from Home component to Login component.

<Login match={this.props.match}/>

It should work.

Answer 2

By default the react-router properties (such as match ) are only automatically injected into the component rendered by a route ( Home in this case). You can add them to your component using the withRouter wrapper. You then have to use the wrapped component instead of the internal one.

import {withRouter} from 'react-router';

...

class LoginInternal extends React.Component<MyProps & RouteComponentProps, IState> {

...

export const Login = withRouter(LoginInternal);