React language issues with it's versions

Question

I am learning to react. I found that I need to install some package to use anything. Does React and Node installation comes empty [No library as we have in Java]?

I am using react-router and react-router-dom version 6.8.0 so that "Routes" can work properly. To use {withRouter}, I need to downgrade the version to 5.2.0.

If I do that, then "Routes" don't work.

Any clarification on how to use React as a front-end language? Or Angular or another language is better?

Here is the code. I want to move to Restaurants1.js from SearchWindow.js on clicking some link.

App.js:

import './App.css';
import Dashboard from './components/Dashboard';
import Restaurants1 from './components/Restaurants1';
import {Routes, Route} from 'react-router-dom';
import { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <>
         <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/restaurants" element={<Restaurants1 />} />   
         </Routes>
      </>
   );
  }
}

SearchWindow.js:

export default class SearchWindow extends Component {

    const newTo = { 
        pathname: "/restaurants", 
        param1: "Par1" 
    };

    const stationsDropDown = (
         <View>
             <Dropdown
                 data={this.state.enableStations ? this.state.stations : undefined}
                    style={styles.dropdown}
             />
                
            <Link to={newTo} className="btn btn-primary">Order Food</Link>
       </View>
    );
}

Restaurants1.js:

import React, { Component } from 'react';
import {View,FlatList, Text, StyleSheet, Image} from 'react-native'; 
import Row from './Row'; //If it's on the same folder
import { useLocation, useParams } from "react-router-dom";
const image1 = require('../assets/icondelivery.PNG')
const image2 = require('../assets/icondelivery.PNG')


var data1 = [{title:"You image title", image: image1}, {title:"Your Image title",image: image2}]

class Restaurants1 extends Component{
    constructor(){
        super();
        console.log("this.props = "+this.props.useParams);
    }

   render(){
        return(
            
            <View>
                
                <FlatList
                    style={{flex:1}} //Don't forget this too
                    data={data1}
                    renderItem={({ item }) => <Row {...item}/>}
                    
                                    
                />
            </View>
        )
    }
  
}
export default () => (
    <Restaurants1 params={useParams()} location={useLocation()} />
  );

Not able to get value of param1 in Restaurants1.js.

See [What happened to withRouter? I need it!](https://reactrouter.com/en/main/start/faq#what-happened-to-withrouter-i-need-it) What exactly is the question here? — Drew Reese, Feb 04 '23 at 04:10
@DrewReese I am using Link to route to another Component[class extends Component]. And I am not able to pass any parameter from Component A to Component B. Saw multiple posts, but still not able to achieve it. — Anish Mittal, Feb 04 '23 at 04:23
It is very difficult to help diagnose code you can't see. Can you [edit] the post to include a [mcve] for what you are trying to do? — Drew Reese, Feb 04 '23 at 05:15
Are you just trying to get the routing up and running? Can you [edit] to include the router and routes code? — Drew Reese, Feb 04 '23 at 07:08
And where is `SearchWindow` component rendered? By `Dashboard`? Where are you getting stuck at in the code? What part isn't working as expected? — Drew Reese, Feb 04 '23 at 07:13
@DrewReese: SearchWindow.js is rendered on top of Dashboard on clicking on some search field. I am passing param1 from SearchWindow.js on clicking on Order Food. I need to access param1 from newTo and use it in Reataurants1.js. So that, I can display different restaurant names based on param1 value. — Anish Mittal, Feb 04 '23 at 07:16
What is "param1"? You don't have any routes with parameters to access. Are you trying to pass some data from one route to another? Does this help answer your question? https://stackoverflow.com/a/59701168/8690857 — Drew Reese, Feb 04 '23 at 07:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/251612/discussion-between-android-and-drew-reese). — Anish Mittal, Feb 04 '23 at 07:23

score 0 · Accepted Answer · answered Feb 04 '23 at 10:40

So, finally, solved.

Restaurant1.js:

import React, { Component } from 'react';
import withRouter from './withRouter';

class Restaurants1 extends Component {
    constructor() {
        super();
    }
    render() {
        console.log("this.props.params = " + this.props.location.state.param);
        return (
            <div />
        )
    }
}
export default withRouter(Restaurants1);

withRouter.js:

import { useLocation, useParams,} from 'react-router-dom'; 
const withRouter = WrappedComponent => props => {
    const location = useLocation();
    const params = useParams();
  
    return (
      <WrappedComponent
        {...{props, params}}
        {...{ location, params,}}
      />
    );
  };
  export default withRouter;

SearchWindow.js:

<Link to="/restaurants" state={{param: "value"}} className="btn btn-primary">Order Food</Link>

React language issues with it's versions

1 Answers1