0

I'm new to ReactJS and i want to switch between components. But if i click to a link, it doesn't load it to a new page, it only includes the linked component into the same component like this:

"OLD COMPONENT" -> clicked to a link -> "OLD COMPONENT - NEW COMPONENT" (showing in same page)

What am i doing wrong?

import React, {Component} from "react";

import UserService from "../../services/user.service";
import {FaEdit} from 'react-icons/fa';
import {Link, Route, Switch} from "react-router-dom";
import {MemoryRouter} from 'react-router';
import LocationsEdit from "./locations.edit.component";

class Locations extends Component {

  constructor(props) {
    super(props);

    this.state = {
      locations: []
    };
  }

  componentDidMount() {
    UserService.getLocations().then(
        response => {
          this.setState({
            locations: response.data.locations
          });
        },
        error => {
          this.setState({
            locations:
                (error.response && error.response.data) ||
                error.message ||
                error.toString()
          });
        }
    );
  }


  render() {

    return (
        <MemoryRouter>
          <div className="container">
            <table className="table">
              <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Standort</th>
                <th scope="col" className="text-right">Aktionen</th>
              </tr>
              </thead>
              <tbody>
              {this.state.locations.map(item => (
                  <tr key={item.id}>
                    <th scope="row">{item.id}</th>
                    <td>{item.name}</td>
                    <td className="text-right">
                      <Link to={"/locations/edit/" + item.id}>
                        <FaEdit/>
                      </Link>
                      &nbsp;&nbsp;&nbsp;
                    </td>
                  </tr>
              ))}
              </tbody>
            </table>
          </div>
          <Switch>
            <Route path="/locations/edit/:id" component={LocationsEdit}/>
          </Switch>
        </MemoryRouter>
    );
  }
}

export default Locations;


import axios from 'axios';
import authHeader from './auth-header';

const API_URL = 'http://rendezvous.wm/api/';

class UserService {
  getLocations() {
    return axios.get(API_URL + 'locations/all', {headers: authHeader()});
  }
  getLocation(id) {
    return axios.get(API_URL + 'locations/read?id='+id, {headers: authHeader()});
  }
}

export default new UserService();
user3786081
  • 177
  • 2
  • 13
  • can you please share code for `UserService` and your `router` file . – Arpit Vyas Jun 24 '20 at 03:55
  • Just edited the post. Thanks. – user3786081 Jun 24 '20 at 04:04
  • Where is that `Switch` code living in relation to the other code? Please share complete component code enough to reproduce an issue. [MCRE](https://stackoverflow.com/help/minimal-reproducible-example) From the looks of it I'd say only the `Switch` statement within `Locations` component is rendering the "other route". – Drew Reese Jun 24 '20 at 04:09
  • Actually the Switch code is in the same component, i also tried to add it in to App.js but still the same problem. – user3786081 Jun 24 '20 at 04:12
  • i think you don't need to `Switch` in your Location component . – Arpit Vyas Jun 24 '20 at 04:13
  • https://stackoverflow.com/a/50645395/8034782 i think you need this – aravind_reddy Jun 24 '20 at 04:30
  • The `Switch` in `Locations` has only a single `Route`. Do you not want the table to display when app is navigated to "/locations/edit/:id"? – Drew Reese Jun 24 '20 at 04:38

0 Answers0