search component with react/redux/router flow

Question

I'm trying to complete my app, have learned react, redux, react router all in one, now I'm just confused a bit when it comes to putting it all together.

Say I have a Nav component that's included in a header that's included globally on all pages and it calls a redux action which then runs a reducer and returns some search results.

When one searches from the navigation bar, how do I get it to redirect a search page that then returns the search results?

Nav component

class Nav extends React.Component {
    render() {
        const { search } = this.props;
        return (
            <header>
                <SearchBox search={search} />
            </header> 
        )
    }
}

that includes a search component

class SearchBox extends React.Component {
    constructor() {
        super();  
        this.state = {
            name: ''
        }
    }

    handleChange = event => {
        this.setState({
            [event.target.id]: event.target.value
        });
    }

    handleSubmit = event => {
        event.preventDefault();
        this.props.search(JSON.stringify({name: this.state.name}))
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text" id="name" onChange={this.handleChange} placeholder="Search" />
                <button type="submit">Search</button>
            </form>
        )
    }
}

my layouts are like

index.js

const Index = () => {
    return (
        <Nav />
        ... Home Content
    )
}

profile.js

const Profile = () => {
    return (
        <Nav />
        ... Profile Content
    )
}

search.js

const Users = (props) => { 
    let list = null;

    list = props.users.map((user, index)=> {
        const { name } = user.profile;
        const { username } = user;

        return (
            <li key={index}>
                <h3><a href={'/'+username}>{name}</a></h3>
            </li>
        )
    });

    return <section id="search"><ul>{list}</ul></section>;
}

class Search extends React.Component {
    render() {
        const { searchResults } = this.props;
            return (
            <Nav />
            <div>
            {   
                /* show 'No results when no results found' */
                searchResults !== '' 
                ? seachResults.length == 0
                  ? 'No results found' 
                  : <Users users={searchResults} />
                : null
            }
            </div>
        )
    }
}

const mapStateToProps = state => ({
    searchResults: state.store.searchResults,   
});

the user action is

export const search = (name) => dispatch => {
...
dispatch({
  type: SEARCH_USER,
  payload: res
})

the reducer is

const initialState = {
    searchResults: ''
};

case SEARCH_USER:
    return {
        ...state,
        searchResults: action.payload.search
    }
}

index.js

class App extends React.Component {
    render() {
        return (
                <Router>
                    <Switch>
                        <Route path="/" exact={true} component={Index} />
                        <Route path="/profile" component={Profile} />
                        <Route path="/search" component={Search} />
                    </Switch>
               </Router>
        )
    }
}