Reactjs 使用react/redux/router流搜索组件

我正在尝试完成我的应用程序，已经学会了react、redux、react router这一切，现在我只是有点困惑，当我把它们放在一起的时候

假设我有一个Nav组件，它包含在所有页面上全局包含的标题中，它调用redux操作，然后运行reducer并返回一些搜索结果

当一个人从导航栏搜索时，我如何让它重定向一个搜索页面，然后返回搜索结果

导航分量

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

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>
        )
    }
}

减速器是

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>
        )
    }
}

类应用程序扩展了React.Component{
render（）{
返回(
)
}
}

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,   
});

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

const initialState = {
    searchResults: ''
};

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

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>
        )
    }
}