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侦听器是一个函数，取而代之的是{{1} }类型

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

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

以下是我希望应用程序导航到或加载ListComponent的NewComponent：

string

顺便说一句，零错误和一些关于引导程序已定义但从未使用过的警告

再次感谢，

Answer 1

就像@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，该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的{{ 1}}属性匹配。

有用的链接

React Router 4 - Quickstart

Answer 2

将锚标记更改为链接
将路由路径更改为url

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

按照反应路由器示例进行进一步了解

React 6导航和点击无法正常工作

2 个答案:

index.js

有用的链接