Question

这是我的app.js

import Index from './index'
import WeatherEng from './weatherEng'
import WeatherAr from './weatherAr'

import {Router, hashHistory, Route} from 'react-router'
ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={Index}>
        <Route path="Arabic" component={WeatherAr}/>
        <Route path="english" component={WeatherEng}/>
    </Route>
  </Router>, document.queryString('.container')
)

和这个索引.js

import React  from 'react';
import ReactDOM from 'react-dom';
import $ from "min-jquery";
import axios from "axios";
import { render } from 'react-dom'
import WeatherEng from './weatherEng'
import WeatherAr from './weatherAr'
import {Link} from 'react-router';


const urlP=`http://localhost:3000/blah`;

class App extends React.Component {
constructor(props){
    super(props);
    this.state={ 
      imagedayA:[],
      imagenightA:[]

      };
  }
   componentDidMount() {
     axios.get(urlP)
            .then(function (response) {
              console.log(response.data,"this is response")
              this.setState({
                imagedayA:response.data.today.iconday,
                imagenightA:response.data.today.iconnight,
              })  
          }.bind(this))
            .catch(function (response) {
              console.log(response);
          });
      }
  render(){
    return (
       <div>
            <button><Link to="WeaAr">another</Link></button>
            <button><Link to="WeaEng">English</Link></button>
            <div>{this.props.children}</div> 

        </div>

    );
  };
}


render(<App/>,document.querySelector('.container'));

http://imgur.com/uPH1y1t 我得到了新的错误Uncaught TypeError：document.queryString不是一个函数（...）警告：propType失败：提供给component的道具Route无效。实际上主要的想法是我想要点击另一个按钮它给你的组件，当点击英文按钮它移动到英语组件

Answer 1

我认为您的Link包含错误的to路径，请尝试以下操作：

<button><Link to="Arabic">another</Link></button>
<button><Link to="english">English</Link></button>

还有一件事你已经rendering App component到React Router render，而App组件中的render(<App/>,document.querySelector('.container'));则不再需要import Index from './index' import WeatherEng from './weatherEng' import WeatherAr from './weatherAr' ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Index}> <Route path="Arabic" component={WeatherAr}/> <Route path="english" component={WeatherEng}/> </Route> </Router>, document.getElementById('container') )：

<div id='container'></div> 删除此行。

使用此代码：

//will hold an array of people objects
var list = [];

//constructor that builds new people to add to address book
function Person(first, last, email,address, number) { //new person constructor
    this.firstName = first;
    this.lastName = last;
    this.address = address;
    this.number = number;
    this.email = email;
};

//TEST: updates live value of form field
function updateValue(selector, value) {
    $(selector).val(value);
}

// TEST: When input is changed, updates live value of whatever form field is
// active
$("#addform > input")
    .change(function () {
        updateValue($(this), $(this).val());
    });

// When the submit button is clicked, create a new person and add the values of
// the form fields  to the properties of the object
$("#addform").submit(function (e) {
    e.preventDefault();
    var person = new Person($("input[name = 'fname']").val(),
                            $("input[name = 'lname']").val(),
                            $("input[name = 'email']").val(),
                            $("input[name = 'address']").val(),
                            $("input[name = 'phone']").val());
    list.push(person);
    console.log(list);
});

将此行放在html文件中：{{1}}

未捕获的错误：在路由器上下文之外呈现的<link />无法导航。（...）做出反应

1 个答案: