React: How to pass data between pages?

Question

Hello and thank you for your time.

I am following this course: https://app.pluralsight.com/library/courses/react-flux-building-applications/table-of-contents and I have discovered that the React Router API has changed.

I am facing difficulties when trying to pass form's data to view, through Route, and Link components.

I will write the important code:

Main.js holds the Route, the important Route is the one which has /author/:id

const Main = () => (
    <Switch>
        <Route exact path="/Home" component={Home}/>
        <Route path="/authors" component={AuthorPage}/>
        <Route path="/about" component={About}/>
        <Route path="/author" component={ManageAuthorPage}/>

        <Route path="/author/:id" component={ManageAuthorPage}/>

        <Redirect from="*" to="/Home"/>
    </Switch>
);

We put the author.id from the authorList.js, the important part is: <td><Link to="/author/"render={(props) => <ManageAuthorPage id={author.id}/>}>{author.id}</Link></td>

    const AuthorList = (props) => {

    const createAuthorRow = function (author) {
        return (
            <tr key={author.id}>

                <td><Link to="/author/"
                          render={(props) => <ManageAuthorPage id={author.id}/>}>{author.id}</Link>
                </td>

                <td>{author.firstName} {author.lastName}</td>
            </tr>
        )
            ;
    };


    return (
        <div>
            <table className="table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                </tr>
                </thead>
                <tbody>
                {props.authors.map(createAuthorRow, this)}
                </tbody>
            </table>
        </div>
    );
};

AuthorList.propTypes = {
    authors: PropTypes.array.isRequired
};

And we use it, on the manageAuthorPage.js, the important code is in ComponentWillMount:

class ManageAuthorPage extends React.Component {
    state = {
        author: {
            id: '',
            firstName: '',
            lastName: '',
        },
    };

    setAuthorState = (event) => {
        let field = event.target.name;
        let value = event.target.value;
        this.state.author[field] = value;
        return this.setState({author: this.state.author});
    };

    saveAuthor = (event) => {
        event.preventDefault();
        AuthorApi.saveAuthor(this.state.author);
        toastr.success('Author saved ;=)');
    };



    componentWillMount = () => {
        const authorId = this.props.id;
        console.log(authorId);

        if (authorId) {
            this.setState({author: AuthorApi.getAuthorById(authorId)});
        }
    };

    render() {
        return (
            <AuthorForm author={this.state.author}
                        onChange={this.setAuthorState}
                        onSave={this.saveAuthor}/>
        );
    };
}

Also the console outputs:

Warning: Invalid value for prop render on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details.

Could you help me please ?

I have also read: React Router Pass Param to Component https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

EDIT:

I have also tried @Ramana Venkata suggestion, using:

        <Route path="/author?id={id}" component={ManageAuthorPage}/>

And in manageAuthorPage I do:

 componentDidMount = () => {
    const authorId = this.props.id;
    console.log(this.props);

    if (authorId) {
        this.setState({author: AuthorApi.getAuthorById(authorId)});
    }
};

And I do see the author.id in the url, but it does not spawn when we write: console.log(this.props);

So I mean, if the URL is:

http://localhost:3001/author/cory-house

The console output for match.location.search is "". Why?

Thank you for your help.

EDIT2: I have also tried updated course's version:

https://github.com/coryhouse/react-flux-building-applications/pull/1/files

With:

The same Main.js route:

        <Route path="/author/:id" component={ManageAuthorPage}/>

Passing the id into the link using it like a string:

                <td><Link to={"author/" + author.id}>{author.id}</Link></td>

Also in manageAuthorPage we now Have:

componentDidMount = () => {
    var authorId = this.props.match.params.id; //from the path '/author:id'
    console.log(this.props);
};

And authorId is undefined:

Also in the console's output I only see the author.id in the: match.location.pathname, for URL: http://localhost:3001/author/cory-house we see:

"/author/cory-house"

Could you help me please?

Thank you.