React 6 导航和点击没有按预期工作

Question

很抱歉问了这么多问题，但这只是我使用 React 的第二个也是 1/2 周。

当我点击以下链接时，我可以在浏览器中看到 URL/URI 的变化，但它似乎没有加载组件。我错过了什么？

import React from "react";
import { Link } from "react-router-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import NewComponent from "./new.component";
import ListComponent from "./list.component";

class NavComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }

  render() {
    return (
      <div className="row">
        <div className="col-sm-8 col-sm-offset-2">
          <nav className="navbar navbar-default">
            <div className="container-fluid">
              <div className="navbar-header">
                <a className="navbar-brand">Simple CRUD</a>
              </div>
              <div id="navbar" className="navbar-collapse">
                <ul className="nav navbar-nav">
                  <li>
                    <a href="#/">Coin Management</a>
                  </li>
                  <li>
                    <a href="#/add">Add Coin</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
          <Router>
            <Route path={"ListComponent"} component={ListComponent} />
          </Router>
          <Router>
            <Route path={"NewComponent"} component={NewComponent} />
          </Router>
        </div>
      </div>
    );
  }
}

export default NavComponent;

我尝试使用 Link to={"/"} 和 Link to={"/add"}，但错误将是 - Link 应该是在路由器内使用。我知道我错过了一些简单的东西。

我也尝试创建一些 onClick={"window.location.href=/add"} 但我收到错误 - 预期 onClick 侦听器是一个函数，而不是得到 string 类型的值

当我使用 onClick='{window.location.href="/add"}' 时出现相同的错误消息 - 它看起来确实在尝试这样做。

我是否必须像在 Laravel 中那样建立路由器组？如果是这样，那么你能给我举一些例子吗？

以下是我希望应用导航到或加载的 NewComponent，以代替 ListComponent：

import React from "react";
import Axios from "axios";
import toastr from "toastr";
import $ from "jquery";
import bootstrap from "bootstrap";
import ListComponent from "./list.component";

class NewComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: null,
      price: null
    };
  }

  submitForm(event) {
    event.preventDefault();
    var data = $(event.target).serialize();
    toastr.clear();
    var isError = false;
    if (this.state.name === "") {
      toastr.error("Coin name must be filled!");
      isError = true;
    }
    if (this.state.price === 0 || this.state.price === "") {
      toastr.error("Coin price must be filled!");
      isError = true;
    }
    if (!isError) {
      toastr.info("Inserting new coin data...");
      Axios.post(
        "http://local.kronus:8001/v2018/ng6crud/api/put-coins/" +
          this.state.id +
          "/" +
          this.state.name +
          "/" +
          this.state.price,
        {
          id: this.state.id,
          name: this.state.name,
          price: this.state.price
        }
      )
        .then(function(response) {
          toastr.clear();
          window.location.href = "#/";
        })
        .catch(function(error) {
          toastr.clear();
          toastr.error(error);
        });
    }
  }

  onCoinNameChange(e) {
    this.setState({
      id: this.state.id,
      name: e.target.value.trim(),
      price: this.state.price
    });
  }

  onCoinPriceChange(e) {
    this.setState({
      id: this.state.id,
      name: this.state.name,
      price: e.target.value
    });
  }

  render() {
    return (
      <div>
        <form className="form-horizontal" onSubmit={this.submitForm.bind(this)}>
          <div className="form-group">
            <label className="control-label col-sm-2" htmlFor="coinEmail">
              Name :{" "}
            </label>
            <div className="col-sm-10">
              <input
                type="text"
                name="coinName"
                onChange={this.onCoinNameChange.bind(this)}
                id="coinName"
                className="form-control"
                placeholder="Coin Name"
              />
            </div>
          </div>
          <div className="form-group">
            <label className="control-label col-sm-2" htmlFor="coinPrice">
              Price :{" "}
            </label>
            <div className="col-sm-10">
              <input
                type="number"
                name="coinPrice"
                onChange={this.onCoinPriceChange.bind(this)}
                id="coinPrice"
                className="form-control"
                placeholder="Coin Price"
              />
            </div>
          </div>
          <div className="form-group">
            <div className="col-sm-offset-2 col-sm-10">
              <button type="submit" className="btn btn-default">
                Save
              </button>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

export default NewComponent;

顺便说一句，零错误和一些关于 bootstrap 被定义但从未使用过的警告

再次感谢您

Answer 1

将锚标记更改为 Link
将路由路径更改为url

https://reacttraining.com/react-router/web/example/basic

为了更好地理解，请参考 React 路由器示例

Answer 2

正如@tholle 在评论中所说，您应该只有一个 Router 组件来包装整个应用程序。通常这是在最顶层的组件上完成的，所以像

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';

import App from './components/App';
import './index.css';

ReactDOM.render(
  // here is where we are wrapping our app, <App /> in <BrowserRouter />
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'));
registerServiceWorker();

这通常是 Create-React-App 应用程序的设置方式，所以无论您使用 YMMV 是什么。请记住将您的顶级组件包装起来，通常 <App /> 在 <BrowserRouter /> 或您的代码 <Router /> 组件中。

现在开始 <Route /> 组件，只有当我们需要将 JS 传递到我们的组件属性时才需要花括号。在您的示例中，<Route path={"ListComponent"} component={ListComponent} /> path 属性需要是与主页相关的 URL，它将负责呈现该组件。所以更像 <Route path='./list' component={ ListComponent } /> 的东西就好了。如果您需要将变量传递到路径中，那么您可以像这样使用花括号 ...path={ var + '/list' }....

最后，要加载 <NewComponent />，您需要 import { Link } from react-router-dom 而不是使用这些锚标记，而是使用 <Link to='/add'>Links to the NewComponent component</Link> 并确保您的 Route 组件呈现 NewComponent 的path 属性匹配。

有用的链接

React Router 4 - Quickstart

React 6 导航和点击没有按预期工作

React 6 navigation and clicks not working as expected

javascript

reactjs

react-router

react-router-dom

index.js

有用的链接