Значение объекта реквизита не передается на следующую страницу

Question

Я не могу понять, почему props.query.address возвращает "undefined". Я использую next.js для маршрутизации.
Пожалуйста, посмотрите на скриншот ниже,

Обратите внимание на выделенный маршрут. Когда я нажимаю кнопку "Добавить запросы", вместо выделенного адреса я получаю неопределенное значение.

Ниже приведен код моего route.js,

const routes = require("next-routes")(); routes .add("/campaigns/new", "/campaigns/new") .add("/campaigns/:address", "/campaigns/show") .add("/campaigns/:address/requests", "/campaigns/requests/index") .add("/campaigns/:address/requests/new", "/campaigns/requests/new"); module.exports = routes;

Добавить код страницы запроса,

`

import React, { Component } from "react";
import Layout from "../../../components/Layout";
import { Form, Input, Message, Button } from "semantic-ui-react";
import { Link } from "../../../routes";

class RequestIndex extends Component {
  static async getInitalProps(props) {
    const { address } = props.query;
    return { address };
  }

  render() {
    return (
      <Layout>
        <h3>Requests</h3>
        <Link route={`/campaigns/${this.props.address}/requests/new`}>
          <a>
            <Button primary>Add Requests</Button>
          </a>
        </Link>
      </Layout>
    );
  }
}

export default RequestIndex;

`

код для страницы создания запроса,

`

import React, { Component } from "react";
import { Form, Input, Message, Button } from "semantic-ui-react";
import Layout from "../../../components/Layout";
import web3 from "../../../ethereum/web3";
import Campaign from "../../../ethereum/campaign";

class RequestNew extends Component {
  state = {
    value: "",
    description: "",
    receipent: ""
  };

  static async getInitialProps(props) {
    console.log(props);
    return { address: props.query.address };
  }

  onSubmit = async event => {
    console.log("onsubmit called");
    console.log("Address is ", this.props.address);
    if (event) event.preventDefault();
    const campaign = Campaign(this.props.address);
    const { description, value, receipent } = this.state;

    try {
      const accounts = await web3.eth.getAccounts();
      await campaign.methods
        .createRequest(description, web3.utils.toWei(value, "ether"), receipent)
        .send({ from: accounts[0] });
    } catch (error) {}
  };

  render() {
    return (
      <Layout>
        <h3 style={{ margin: "20px" }}>Create a Request</h3>
        <Form onSubmit={this.onSubmit} style={{ margin: "20px" }}>
          <Form.Field>
            <label>Description</label>
            <Input
              value={this.state.description}
              onChange={event =>
                this.setState({ description: event.target.value })
              }
            />
          </Form.Field>
          <Form.Field>
            <label>Amount in Ether</label>
            <Input
              value={this.state.value}
              onChange={event => this.setState({ value: event.target.value })}
            />
          </Form.Field>
          <Form.Field>
            <label> Receipent's Address</label>
            <Input
              value={this.state.receipent}
              onChange={event =>
                this.setState({ receipent: event.target.value })
              }
            />
          </Form.Field>
          <Button primary>Create</Button>
        </Form>
      </Layout>
    );
  }
}

export default RequestNew;

`