javascript - JS中route.param常量应该如何分隔？

Question

我的 React Native 应用程序中有以下内容：

Hub.js：

export default class Hub extends Component {
    static navigationOptions = {
        header: null
    };

    ...

    render() {
        return (
            <View style={{flex: 1}}>
                        <TouchableOpacity
                        onPress={() => {
                            this.props.navigation.navigate('Link', {
                              site: 'CB Practice Test 1',
                            });
                          }}
                        >
                            <Text>Practice Test #1</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                        onPress={() => {
                            this.props.navigation.navigate('Link', {
                              site: 'CB Practice Test 3',
                            });
                          }}>
                            <Text>Practice Test #3</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                        onPress={() => {
                            this.props.navigation.navigate('Link', {
                              site: 'CB Practice Test 5',
                            });
                          }}
                        >
                            <Text>Practice Test #5</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                        onPress={() => {
                            this.props.navigation.navigate('Link', {
                              site: 'CB Practice Test 6',
                            });
                          }}
                        >
                            <Text>Practice Test #6</Text>
                        </TouchableOpacity>
                    </View>
            </View>
        )
    }
}

webviewsFolder/Links.js：

export default function Links({ route }) {
   
    const link = route.params.site ===
    'CB Practice Test 1' ? 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-1.pdf' :
    'CB Practice Test 3' ? 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-3.pdf' :
    'CB Practice Test 5' ? 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-5.pdf' :
    'CB Practice Test 6' ? 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-6.pdf' :
    'https://www.kaggle.com/';

  return <WebView source={{ uri: link }} />;
}

我的问题是只返回他们应该返回的页面CB Practice Test 1，CB Practice Test 3但CB Practice Test 5&的按钮6将返回CB Practice Test 3. 我不知道为什么会发生这种情况，我认为这可能是语法错误，但如果是这样，我不确定它是什么或如何解决它。

Answer 1

解决方案

1. 尝试将“链接”更改为“链接”

this.props.navigation.navigate('Link', { site: 'CB Practice Test 1', });

2. 或者尝试使用 switch case 而不是简写。

   export default function Links({route}){
   let link;
   switch(route.params.site){case 'CB Practice Test 1':
       link = 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-1.pdf'
   case 'CB Practice Test 3':
       link = 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-3.pdf'
   case 'CB Practice Test 5':
       link = 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-5.pdf'
   case 'CB Practice Test 6':
       link = 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-6.pdf'
   }
   default:
   'https://www.kaggle.com/';
   }
   return <WebView source={{ uri: link }} />;