CODEWITHSUNDEEP
reactjs
razvanusc
razvanusc

Reputation: 179

How to redirect to new page in React

I'm trying to learn React and I'm struggling to redirect to the page where it shows the details about the clicked item. I have added the react-router-dom but I don't know where to go from here.

My brewery.js

import React from "react";

class Brewery extends React.Component {
 render() {
const name = `${this.props.brewery.name} - ${this.props.brewery.city}`;
 return <div>{name}</div>
 }
}

export default Brewery;

My app.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Brewery from './components/brewery'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      breweries: []
    };
    }

  componentDidMount() {
    fetch("https://api.openbrewerydb.org/breweries")
      .then(response => response.json())
      .then((data) => {
        this.setState({
          breweries: data,
        })
      })
  }

  render() {
    return(
      <div>
            {this.state.breweries.map((brewery) => {
              return <Brewery key={brewery.name} brewery={brewery}/>
          })}
      </div>
    )
  }
}

export default App;

Upvotes: 0

Views: 1948

Answers (1)

Anil Kumar
Anil Kumar

Reputation: 2309

Start with below:

import { BrowserRouter,Route,Switch } from 'react-router-dom';

Now wrap you app.js in index.js with BrowserRouter like:

<BrowserRouter><App /></BrowserRouter>

You have router in you project. now define routes

<Switch><Route path="/" component={Home}/></Switch>

So whenever you type "/" Home component will load.

If you want to move to new page use props.history.push('/profile');. This will redirect you to profile page.

Upvotes: 1

Related Questions