Question

我正在尝试学习React，而且我正努力重定向到该页面，其中显示了有关单击项的详细信息。我已经添加了react-router-dom，但是我不知道从这里去哪里。

我的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;

我的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;

Answer 1

从下面开始：

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

现在使用如下浏览器将app.js包装在index.js中：

<BrowserRouter><App /></BrowserRouter>

您的项目中有路由器。现在定义路线

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

因此，只要您键入“ /”，就会加载Home组件。

如果要转到新页面，请使用props.history.push（'/ profile'）;。这会将您重定向到个人资料页面。

如何在React中重定向到新页面

1 个答案: