How should route.param constants be separated in JS?

Question

I have the following in my React Native app:

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 }} />;
}

My problem is that only CB Practice Test 1 and CB Practice Test 3 return the pages that they should, but the buttons for CB Practice Test 5 & 6 will return the url for CB Practice Test 3. I have no idea why this is happening, I think it may be a syntax error, but if so, I'm not sure what it is or how to solve it.

Answer 1

Solution

1. Try change the 'Link' to 'Links'

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

2. Or try using switch case instead of shorthand.

   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 }} />;