Question

我正在尝试在两个URL之间导航，但是没有得到预期的结果。

当我通过浏览器直接访问url时，组件将按路径渲染，但是当我单击url时，组件将不渲染。

示例：

打开浏览器并访问http://localhost:3000->呈现组件Home。
单击'Minha Carteira'->再次渲染组件Home。（预期：PersonlWallet呈现。）当我访问http://localhost:3000/personalWallet时，组件“个人钱包”呈现。

有人可以帮助我吗？

反应路由器版本：4.3.1

index.js

ReactDOM.render(
  <Router>
    <Route path="/*" component={App} />
  </Router>
, document.getElementById('root'));
registerServiceWorker();

App.js

render(){

    return (

      <div>
        <nav className="navbar navbar-expand-lg navbar-dark bg-dark" style={{backgroundColor:'#563d7c !important'}}>
          <a className="navbar-brand" href="#">Project</a>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">

                <ul class="navbar-nav mr-auto">
                  <li class="nav-item active">
                    <Link className="nav-link" to="/">Home</Link>
                  </li>

                  <li class="nav-item active">
                    <Link className="nav-link" to="/personalWallet">Minha Carteira</Link>
                  </li>

                </ul>

            </div>

        </nav>

        <div className="container">

          <BrowserRouter>
            <div>
              <Route path="/" exact component={Home} />
              <Route path="/personalWallet" component={PersonalWallet} />
              <Route path="/fii/:id" component={Fii} />
            </div>
          </BrowserRouter>

        </div>
      </div>
    );
  }

Home.js

import React, { Component } from 'react';

import ListFii from '../components/ListFii'

import logo from '../logo.svg';
import './Home.css';
import SERVER_URL from '../index'

class Home extends Component {

  constructor(props) {
    super();
    this.state = {
      SHOPPING: [],
      LOGISTIC: [],
      COORPORATE: [],
      PAPER: [],
      HIBRID: [],
      HOSPITAL: [],
      OTHERS: [],
      BANK_AGENCY: []
    }
  }

  loadData(type) {

        fetch(SERVER_URL + 'fiis?type=' + type,{
      headers: {
           "Authorization" : sessionStorage.getItem('personLoggedInToken')
       }

    })
            .then(response => response.json())
            .then(data => {
                this.setState({
          [type]: data
        })
        })
            .catch(err => console.error(this.props.url, err.toString()))
    }

  componentDidMount() {
        this.loadData("SHOPPING")
    this.loadData("LOGISTIC")
    this.loadData("COORPORATE")
    this.loadData("PAPER")
    this.loadData("HIBRID")
    this.loadData("HOSPITAL")
    this.loadData("OTHERS")
    this.loadData("BANK_AGENCY")
    }

  render() {

    return (
      <div>

        <div className='container' style={{marginTop:10}}>

          <div class="row">

            <div className="col-md-4">
              <div class="card">
                <div class="card-header">
                  Shoppings
                </div>
                <div class="card-body">
                  <ListFii list={this.state.SHOPPING}></ListFii>
                </div>
              </div>

              <div class="card" style={{marginTop:10}}>
                <div class="card-header">
                  Agências Bancárias
                </div>
                <div class="card-body">
                  <ListFii list={this.state.BANK_AGENCY}></ListFii>
                </div>
              </div>

              <div class="card" style={{marginTop:10}}>
                <div class="card-header">
                  Híbridos
                </div>
                <div class="card-body">
                  <ListFii list={this.state.HIBRID}></ListFii>
                </div>
              </div>

            </div>

            <div className="col-md-4">
              <div class="card">
                <div class="card-header">
                  Logísticos
                </div>
                <div class="card-body">
                  <ListFii list={this.state.LOGISTIC}></ListFii>
                </div>
              </div>

              <div class="card" style={{marginTop:10}}>
                <div class="card-header">
                  Papel
                </div>
                <div class="card-body">
                  <ListFii list={this.state.PAPER}></ListFii>
                </div>
              </div>

            </div>

            <div className="col-md-4">
              <div class="card">
                <div class="card-header">
                  Lajes Corporativas
                </div>
                <div class="card-body">
                  <ListFii list={this.state.COORPORATE}></ListFii>
                </div>
              </div>

              <div class="card" style={{marginTop:10}}>
                <div class="card-header">
                  Hospitais
                </div>
                <div class="card-body">
                  <ListFii list={this.state.HOSPITAL}></ListFii>
                </div>

              </div>

              <div class="card" style={{marginTop:10}}>
                <div class="card-header">
                  Outros
                </div>
                <div class="card-body">
                  <ListFii list={this.state.OTHERS}></ListFii>
                </div>
              </div>

            </div>

          </div>
        </div>
      </div>
    );
  }

}

export default Home;

PersonalWallet.js

import React, {Component} from 'react';
import FiiWalletBox from '../components/FiiWallet/FiiWalletBox';
import SERVER_URL from '../index'

class PersonalWallet extends Component {

  constructor(props) {
    super();
    this.state = {
      personId : props.personId,
      fiis : []
    }
  }

  componentWillUpdate(props) {
    this.state = {
      personId : props.personId,
      fiis : []
    }
  }

  componentDidMount() {
    fetch(SERVER_URL + 'person/'+this.state.personId+'/fiis',{
      headers : {
        "Authorization" : sessionStorage.getItem("personLoggedInToken")
      }
    })
            .then(response => response.json())
            .then(data => {
                this.setState({
          fiis: data
        })
        })
            .catch(err => console.error(this.props.url, err.toString()))
  }

  render(){
    return (
      <div>

        <div className='container'>

          <div className='row' style={{marginTop:10}}>
            <div className='col-md-12'>
              <h2>Minha Carteira</h2>
            </div>
          </div>

          <div class="row" >

            {this.state.fiis.map(x => {
                  return (
                  <FiiWalletBox object={x} />
               )
            }
          )}
          </div>
        </div>
      </div>
    );

  }

}

export default PersonalWallet;

谢谢！

Answer 1

Link组件从BrowserRouter组件提供的上下文中获取其历史信息，因此您需要确保所有Link组件也是BrowserRouter的子代。< / p>

您可以将其用作应用程序中最重要的组件。

render() {
  return (
    <BrowserRouter>
      <div>
        <nav
          className="navbar navbar-expand-lg navbar-dark bg-dark"
          style={{ backgroundColor: "#563d7c !important" }}
        >
          <a className="navbar-brand" href="#">
            Project
          </a>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <Link className="nav-link" to="/">
                  Home
                </Link>
              </li>

              <li class="nav-item active">
                <Link className="nav-link" to="/personalWallet">
                  Minha Carteira
                </Link>
              </li>
            </ul>
          </div>
        </nav>

        <div className="container">
          <div>
            <Route path="/" exact component={Home} />
            <Route path="/personalWallet" component={PersonalWallet} />
            <Route path="/fii/:id" component={Fii} />
          </div>
        </div>
      </div>
    </BrowserRouter>
  );
}

标签“链接”仅更改URI，组件未渲染

1 个答案: