react, axios and route

Viewed 410

I'm testing some function, I discover a solution but I'm not sure that is correct way.

I need to load data from API so I used axios, and I need to share data between some child routes, I am currently using simple setState to keep values and passed them to the Route Components to be used.

Here is the MainContainer component

import React from 'react';
import axios from 'axios';
import { BrowserRouter, Route, Switch, Link, HashRouter, useLocation  } from 'react-router-dom';
import Languages from './pages/Languages';
import Home from './pages/Home';

export default class MainContainer extends React.Component 
{
    constructor(props) {
      super(props);

      this.state = {
        languages: null,
        language:null,
      } 
    }

    get_init(language)
    {
        console.log("get_init")
        var params = {
            language:language,
        }

        axios
        .get("https://xxxx.com/wp/it/api/init/")
        .then(function(result) {   
           this.setState({languages:result.data.languages});
        }.bind(this));
       
    }
    
    render() {
        console.log("render")
        return (
            <div>
                <Switch>
                    <Route  path="/"  component={() => <Languages get_init={this.get_init.bind(this)} languages={this.state.languages} />} exact />
                    <Route  path="/:language/" component={(urlparam) => <Home language={urlparam.match.params.language} get_init={this.get_init.bind(this)} languages={this.state.languages} />} exact/>
                
                    <Route component={Error}/>
                </Switch>
            </div>
        );
    }
    
}

My Language Component is bellow

import axios from 'axios';
import React from 'react';
import LoaderData from './../helpers/LoaderData';
import { Link } from 'react-router-dom';
export default class Languages extends React.Component 
{
    constructor(props) 
    {
        super(props);
       
        if (props.languages==null)
        {
            this.props.get_init();
        }
       
    }
    render() {
        if (this.props.languages==null)
        { 
            return '';
        }
        return (
            <div>

                <div className='main'>
                LANGUAGE {Math.random()}<br/>
                {
                    this.props.languages.map((language, i) => 
                    {     
                        return (<div key={language.prefix}><Link  to={language.prefix+"/"} >{language.name}</Link> <br/></div>) 
                    })
                }


                </div>

            </div>
        );
    }
}

is a correct way to build a website in react or there are better ways?

0 Answers
Related