I need to make my button redirect to another page(js file)

Question

I have a main page with buttons that have the onClick function but now i need to give the buttons the ability to direct me to a different page.

This is my main page atm:

import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { Link } from 'react-router-dom'


export default class ButtonBasics extends Component {

  render() {

    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button
            onPress={pressHandler}
            title="Lesson 1"
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            onPress={pressHandler}
            title="Lesson 2"
            color="#841584"
          />
        </View>
      </View>
    );
  }
}

i need the buttons to direct me to a js file in the same map whats the best way to do this im still quite new with react native.

this is the page that needs to be directed to:

import React, {useState} from 'react';
import { StyleSheet, View, Text, ButtonSafeAreaView,TouchableOpacity,FlatList,SafeAreaView} from 'react-native';
import { globalStyles } from '../../../styles/global';
const GLOBAL = require('../../assets/Globals');
const lessondata = ("../../assets/json/" + global.currentLesson + ".json");
import jsondata from "../../assets/json/1.json";

export default function Lessen({ App, navigation }) {

    const pressHandler = () => {
        navigation.goBack();
      }

    const DATA = jsondata["data"];

      function Item({ id, title, selected, onSelect }) {
        return (
          <TouchableOpacity
            onPress={() => onSelect(id)}
            style={[
              styles.item,
              { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
            ]}
          >
            <Text style={styles.title}>{title}</Text>
          </TouchableOpacity>
        );
      }

        const [selected, setSelected] = React.useState(new Map());

        const onSelect = React.useCallback(
          id => {
            const newSelected = new Map(selected);
            newSelected.set(id, !selected.get(id));

            setSelected(newSelected);
          },
          [selected],
        );


        return (
          <SafeAreaView style={globalStyles.container}>
            <FlatList
              data={DATA}
              renderItem={({ item }) => (
                <Item
                  id={item.id}
                  title={item.title}
                  selected={!!selected.get(item.id)}
                  onSelect={onSelect}
                />
              )}
              keyExtractor={item => item.id}
              extraData={selected}
            />
          </SafeAreaView>
        );
      }

Answer 1

React Navigation(Stack) will work for you react navigation

Steps:- 1. Create a seperate file for navigation

2. import both component in navigation component

3. onPress called navigation.navigate('TargetComponent')

Hope it help.