React-router-native не загружает новые страницы полностью, вместо этого он загружается на той же странице

Question

Я использую React-router-native , чтобы связать свои страницы в приложении. Ниже приведен код. Когда я нажимаю «Другие ссылки» , другая страница не загружается, вместо этого на той же странице отображается содержимое других ссылок. может кто-нибудь помочь, где я ошибаюсь?

Какой лучший способ связывать страницы в React-Native. Маршрутизатор или навигация?

import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Dimensions,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';


import {
  WebView,
} from 'react-native-webview';

import {
  NativeRouter as Router,
  Switch,
  Route,
  Link,
} from 'react-router-native';


import Box from './Main files/boxes';
import Pharmacology from './Main files/Subjects/pharmacology';
import Home from './Main files/home';
import TopBar from './Main files/topBar';
import Subjects from './Main files/subjects';


const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
      <TopBar/>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>

          <Header />

          <View style={styles.body}>
            <Router>
              <View>
                <View>
                  <Link to='/'>
                    <Text style = 'section.Container'>This is home page text</Text>
                  </Link>
                  <Link to ='/Main files/subjects'>
                    <Text>Other link</Text>
                  </Link>
                </View>
                     <Switch>
                    <Route path='/Main files/subjects' exact component= {Subjects}/>
                    <Route path = '/boxes' exact component = {Box}/>
                    <Route path = '/Subjects/pharmacology' exact component = {Pharmacology}/>
                  </Switch>
              </View>
            </Router>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    width : '100%',
    height: '100%',
    flexDirection: 'row'
  },

  flexContainer: {
    width: '35%',
    position: "relative",
    height: 150,
    borderWidth: 1,
    marginHorizontal: '5%',
    marginVertical: '5%',
    flexDirection: 'row',
    flex: 1,
},

  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});



export default App;