Question

我正在创建一个使用React Router v4的React应用程序。我已经构建了一个下拉菜单，我希望用户在选择他们喜欢的选项时被重定向到不同的页面。重定向确实有效，但是当渲染新路线时，选择消失并弹出以下错误：

Warning: You tried to redirect to the same route you're currently on: "/you/your-favorite-news"

这是呈现和处理选择的组件：

import React from 'react';
import { Redirect, Switch } from 'react-router-dom';

class Select extends React.Component {

    constructor( props ) {

        super( props );

        this.state = {
            value: this.props.currentUrl, 
            redirect: false, 
        } 

        this.handleSelectChange = this.handleSelectChange.bind( this ); 

    }

    handleSelectChange( event ) {
        event.preventDefault();
        this.setState({
            value: event.target.value,
            redirect: true
        });     
    }

    renderSelectOptions() { 
        return this.props.selectOptions.map( option => {
            return <option key={ option.id } value={ option.slug }>{ option.title }</option>
        }); 
    }

    render() {

        const redirect = this.state.redirect; 

        if( redirect ) {
            return <Redirect to={ "/you/" + this.state.value } />; 
        }       

        return (
            <select 
                name="user-nav-select" 
                id="user-nav-select" 
                value={ this.state.value }
                onChange={ this.handleSelectChange }>{ this.renderSelectOptions() }</select>
        );

    }

}

export default Select;

我应该提一下，我正在创建的应用程序是在初始页面加载时在服务器上呈现的，所以我实际上正在使用react-router-config包并按如下方式声明我的路由：

import React from "react";
import { Route } from "react-router-dom";

import App from "./App";
import ArchivePage from "./pages/ArchivePage";
import HomePage from "./pages/HomePage";
import LoginPage from "./pages/LoginPage";
import SinglePostPage from "./pages/SinglePostPage";
import UserPage from "./pages/UserPage";

export default [
    {
        ...App, 
        routes: [
            {
                ...HomePage, 
                path: '/', 
                exact: true
            },
            {
                ...ArchivePage, 
                path: '/tag/:slug'
            },  
            {
                ...UserPage, 
                path: '/you/:slug'
            },      
            {
                ...LoginPage, 
                path: '/login'
            },              
            {
                ...SinglePostPage, 
                path: '/:slug'
            },                                                  
        ]
    }
];

可能导致该错误的原因是什么？

使用React Router v4重定向选择更改时出错

0 个答案: