Unable do access prop passed trough React Route/Link?

I have built the following website using React and I am at a point where I need to request an API some data based on user search, so I tried passing the search text has a prop to the new component which will make the request and render the results, however, it complains about the prop that I pass being declared but never used. Ive started learning React about 2/3 weeks ago, so I'm pretty fresh here, have mercy :)

This class is the main one related to the Search part of the website:

class SearchPageContent extends React.Component{
    render() {
    return (
        <div className="container">
            <a className="btn btn-primary" style={{ marginRight:"10px" }} href="/festivals/categorySearch" > Pesquisar por categoria </a>
            <a className="btn btn-primary" href="/festivals/textSearch"> Pesquisar por palavras-chave </a>
            <Switch>
                <Route exact path="/festivals/categorySearch" component={CategorySearch}/>
                <Route exact path="/festivals/textSearch" component={TextSearch}/>
                <Route path="/festivals/textSearch/search=" component={SearchResults}/>
            </Switch>        
            <br/><br/>
        </div>
    );
    }
}

This line:

<Route path="/festivals/textSearch/search=" component={SearchResults}/>

Is the Route of interest, which is supposed to take the text written and insert it in the url. In this class is where I insert the <Link> tag:

class TextSearch extends React.Component{
    constructor(props) { 
        super(props);
        this.state = { textkeysearch : "" };
    }

    handleSearchText(e){
        this.setState({ textkeysearch : e.target.value});
    }

    render() {
    return (
        <div className="mt-3">
            <br/><br/>
            <input id="text-search" type="text" onChange={this.handleSearchText.bind(this)} />
            <Link to={{ pathname: "/festivals/textSearch/search=", state:{textInput : this.state.textkeysearch} }}>
                <a class ="btn btn-info ml-3" id="textSearch" href={"/festivals/textSearch/search=" + this.state.textkeysearch} >Procurar</a><br/>
            </Link>
            <span>*Insira uma palavra-chave - pode ser o nome do evento, o sítio onde irá decorrer, entre outros...</span>
            
        </div>
    );
    }
}

And the component that is supposed to access the prop:

class SearchResults extends React.Component{
    componentDidMount(){
        const textInput = this.props.match.params    <--------"textInput is declared but never used"
        //TODO axios()
    }
        
    render() {
        return(
            <div>
                <p>IARARARA</p>                       <--------This appears
                <p>{this.textInput}</p>               <--------This does not 
            </div>
        );
    }
}

I've been hitting my head for a couple times, tried a bunch of combinations, regarding this insertion before. Tried using a constructor instead, same result.

At some point i was sucessfull passing the written text through the url but ended with SearchPageContent and SearchResults mixed on the same page, and still couldn't access prop on the

tag. Also tried const {textInput} = this.props.match.params instead, but the result is equal.

There a couple more things i tried which I do not remember, but always got the same result.

I'm also open to any sugestions that would improve my code. I think the code i transcribed is suficient, but if not, I placed it in a remote repository if you want to check it: https://github.com/reborn12008/HitchHikers-Collab-React-

UPDATE

By creating a state in a constructor method like so:

constructor(props){
    super(props);

    this.state ={
        textWritten : this.props.location.state.textInput,
    }
}

And accessing in the same way : {this.state.textWritten} Seems to work for rendering purposes.