Javascript 在React.js中实现路由器以更改页面

我正在制作一个react.js购物列表应用程序，我有它，这样你就可以输入值并将它们打印到一个表中。这是我第一次使用react，我想把我的表放在一个单独的页面上。我知道路由器的方法，但在实现它时遇到了困难

这是我的密码 注意：我还没有添加任何东西来在页面之间导航，但我希望打印按钮可以从App.js导航到Details.js

import NavBar from "./components/navbar";
import "./App.css";
import Counters from "./components/counters";
import Details from "./Details";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

class App extends Component {
  state = {
    counters: [
      //example of objects in array
      /*{ id: 1, value: 2, text: "hi" },*/
    ],
  };
  constructor(props) {
    super(props);
    console.log("app- constructor");
  }

  componentDidMount() {
    console.log("app- mouneted");
  }

  handleIncrement = (counter) => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counters[index].value++;
    this.setState({ counters });
  };

  handleDecrement = (counter) => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counters[index].value--;
    this.setState({ counters });
  };

  handleReset = () => {
    const counters = this.state.counters.map((c) => {
      c.value = 0;
      return c;
    });
    this.setState({ counters });
  };

  handleName = () => {
    var name = prompt("name");
    return name;
  };

  handleCreate = () => {
    const create = this.state.counters.length + 1;
    const counter = this.state.counters.push({
      id: create,
      value: 0,
      text: this.handleName(),
    });
    this.setState({ counter });
  };

  handleDelete = (counterId) => {
    const counters = this.state.counters.filter((c) => c.id !== counterId);
    this.setState({ counters });
  };

  handleInfo = () => {
    let x;
    //loops through all tems and adds the to the list
    for (x = 0; x <= this.state.counters.length; x++) {
      //breaks loop if x is == to counters array
      if (this.state.counters.length == x) {
        break;
      }
      const info = this.state.counters[x]["text"];
      const quantity = this.state.counters[x]["value"];
      console.log(info, quantity);

      //creates rows based on input
      var table = document.getElementById("myList");
      var row = table.insertRow(1);
      var itemCell = row.insertCell(0);
      var quantityCell = row.insertCell(1);
      itemCell.innerHTML = info;
      quantityCell.innerHTML = quantity;
    }
    //calls the print function
    return <a href="http://localhost:3000/Details"></a>;
  };

  render() {
    console.log("rendered");
    return (
      <React.Fragment>
        <NavBar
          totalCounters={this.state.counters.filter((c) => c.value > 0).length}
        />

        <main className="container">
          <Counters
            counters={this.state.counters}
            onReset={this.handleReset}
            onCreate={this.handleCreate}
            onIncrement={this.handleIncrement}
            onDecrement={this.handleDecrement}
            onDelete={this.handleDelete}
            onInfo={this.handleInfo}
          />
        </main>

        <div>
          <table bordered id="myList">
            <tr>
              <th>Items</th>
              <th>Quantity</th>
            </tr>
          </table>
        </div>
        <style>
          {`
          th{
            border: 2px solid black;
            padding: 2px;
            min-width: 100px;
            font-size: 22px;
            font-style: bold;
          }
          
          td{
            border: 2px solid black;
            padding: 2px;
            min-width: 100px;
            font-size: 18px;
          }

        
          `}
        </style>
      </React.Fragment>
    );
  }
}

export default App;

从“/components/NavBar”导入导航栏；
导入“/App.css”；
从“/components/Counters”导入计数器；
从“/Details”导入详细信息；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
类应用程序扩展组件{
状态={
计数器：[
//数组中的对象示例
/*{id:1，值：2，文本：“hi”}*/
],
};
建造师（道具）{
超级（道具）；
console.log（“app-constructor”）；
}
componentDidMount（）{
console.log（“应用程序-Mounted”）；
}
handleIncrement=（计数器）=>{
常量计数器=[…this.state.counters]；
const index=计数器。indexOf（计数器）；
计数器[索引]={…计数器}；
计数器[索引]。值++；
this.setState（{counters}）；
};
handleDecrement=（计数器）=>{
常量计数器=[…this.state.counters]；
const index=计数器。indexOf（计数器）；
计数器[索引]={…计数器}；
计数器[索引]。值--；
this.setState（{counters}）；
};
handleReset=（）=>{
const counters=this.state.counters.map（（c）=>{
c、 数值=0；
返回c；
});
this.setState（{counters}）；
};
handleName=（）=>{
变量名称=提示（“名称”）；
返回名称；
};
handleCreate=（）=>{
const create=this.state.counters.length+1；
常量计数器=this.state.counters.push({
id:创建，
值：0，
text:this.handleName（），
});
this.setState（{counter}）；
};
handleDelete=（计数器ID）=>{
const counters=this.state.counters.filter（（c）=>c.id！==counterId）；
this.setState（{counters}）；
};
handleInfo=（）=>{
设x；
//循环遍历所有TEM并将其添加到列表中
对于（x=0；x 0）.length}
/>
项目
量
{`
th{
边框：2件纯黑；
填充：2px；
最小宽度：100px；
字体大小：22px；
字体风格：粗体；
}
运输署{
边框：2件纯黑；
填充：2px；
最小宽度：100px；
字号：18px；
}
`}
);
}
}
导出默认应用程序；

这就是我的应用程序的外观 但我想把桌子放在细节页上 谢谢你的帮助

---

路由器

不是一种方法，而是一个封装应用程序的组件。在

路由器

内部，

交换机

组件封装了

路由

的多个实例，这些实例反过来又封装了在点击该路由时要渲染的组件。最后，

Link

组件用于构建到各种

Route

实例的链接。总的来说，它看起来像这样：

import { 
    BrowserRouter as Router, 
    Switch, 
    Route,
    Link
} from "react-router-dom";

<Router>
    <Switch>

        <Route exact path="/">
            <div>

                ...insert home page here...

                <Link to="/details">Click here to go to details page!</Link>

            </div>
        </Route>

        <Route path="/details">
            ...details page/component here...
        </Route>

    </Switch>
</Router>

import{
BrowserRouter作为路由器，
转换
路线,，
链接
}从“反应路由器dom”；
…在此处插入主页。。。
单击此处转到详细信息页面！
…此处的详细信息页/组件。。。

---

有关更多信息，请参阅。

是否可以将其放入函数的返回中，或者它是否会不起作用？好的，我已经添加了它，我确实有一个链接，它确实会转到我的。。。。。虽然我的Details.js中没有任何内容，但它保持了同一页面的所有相同组件。有人知道渲染函数应该返回的whyYes吗。如果交换机内有任何内容，但在

路由

s之外，则将在两个页面上呈现。如果这不是问题，请尝试将道具

exact

传递到

/

路线。我已经编辑了上面的例子来反映这一点。谢谢，我会尝试的，谢谢，非常感谢。这比我想象的要复杂得多，在学习react之前，我所有的项目都是用vanilla JavaScript完成的，更改页面要容易得多