Question

我正在尝试完成我的应用程序，已经学会了将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>
        )
    }
}

我的布局就像

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

用户操作是

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

reducer是

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

Answer 1

看看How to push to History in React Router v4?

然后将其添加到您的App类

<Router history={history}>
    ...
</Router>

在您的用户操作中，获取数据后使用history.push重定向到/ search

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

    history.push('/search');
}

您的“搜索和用户”组件应负责其余的工作，并填充您的商店。如果找不到结果，您可以对错误进行类似的处理

具有react / redux / router流的搜索组件

1 个答案: