[英]implementing Router to change pages in React.js
我正在制作一個我擁有的 react.js 購物清單應用程序,以便您輸入值並將它們打印到表格中。 這是我第一次使用 React,我想將我的表放在一個單獨的頁面上我知道 ROUTER 方法,但在實現它時遇到了麻煩。
這是我的代碼說明:我還沒有添加任何東西來在頁面之間導航,但我希望打印按鈕從 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;
這是我的應用程序的樣子,但我希望表格位於“詳細信息”頁面上任何幫助表示贊賞
Router
不是一種方法,而是一個包裝應用程序的組件。 在Router
內部, Switch
組件包裝了Route
的幾個實例,這些實例又包裝了在命中該路由時要呈現的組件。 最后, 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>
有關更多信息,請參閱React Router 教程。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.