Javascript React JS：点击URL从一个组件重定向到另一个组件的正确方法

好的，我是React JS的新手，我正在尝试在线学习一些教程。我已经创建了CRUDAPI并将其托管在Azure中。api正在运行。然而，我的问题是前端框架。我选择了React JS，这样我就可以学习它了

我正在尝试设置我的项目以允许CRUD操作。单击AddNewItemurl时，我无法将用户从产品/项目列表重定向到添加新项目页面

这是我到目前为止所拥有的

App.js

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

import {Home} from './components/Home';
import {Products} from './components/Products';
import {NoMatch} from './components/NoMatch';
import {Layout} from './components/Layout';
import {NavigationBar} from './components/NavigationBar';    

class App extends Component {
  render(){
    return (
    <React.Fragment>
      <NavigationBar/>
      <Layout>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/products" component={Products} />
          <Route component={NoMatch} />
        </Switch>
      </Router>
      </Layout>
    </React.Fragment>
    );
  }
}

export default App;

import Items from './Items';
import AddNewItem from './AddNewItem';
import { Link } from 'react-router-dom';
import React, { Component } from 'react';


export const Products = () => (
    <div>
        <br />
        <h2>All Products</h2>
        <Link to={"./AddNewItem"} className="btn btn-primary">
        Add Item
        </Link>
        <Items/>
    </div>
);

import React, { Component } from 'react';
import {Table, Button} from 'react-bootstrap';


class Items extends Component {

    constructor(props){
        super(props);
        this.state = {
            items: [],
            isLoaded: false,
        }
    }

  componentDidMount() {
    const apiUrl = 'https://myGetAllItemsRestApi/Item';
    fetch(apiUrl)
      .then(response => response.json())
      .then((json) => {
          this.setState({
            isLoaded: true, items: json,
          })
      });
  }

   
  render() {
    var { isLoaded, items} = this.state;

    if(!isLoaded){
        return <div>Loading API response...</div>;
    }else{
        return(
            
            <div className="Items">
                              
                <br />
                <Table className="Table">
                    <thead>
                        <th>Image</th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Description</th>
                        <th>Number</th>
                        <th>Characteristics</th>
                        <th>Full Features</th>
                        <th>
                        {/* For Edit button */} 
                        </th>
                        <th>
                        {/* For Delete button */} 
                        </th>
                    </thead>
                    <tbody>
                        
                    {items.map(item =>(
                        <tr key={item.itemid}>
                            <td>ImageHolder</td>
                            <td>{item.itemid}</td>
                            <td>{item.item_name}</td>
                            <td>{item.item_price}</td>
                            <td>{item.item_description}</td>
                            <td>{item.item_number}</td>
                            <td>{item.item_characteristics}</td>
                            <td>{item.item_fullfeatures}</td>
                            <td><a href="#">Edit</a></td>
                            <td><a href="#">Delete</a></td>
                        </tr>
                    ))}
                    </tbody>
                </Table>
            </div>
            
        );
    }
  }
}

export default Items;

import React, { Component } from 'react';

class AddNewItem extends Component {
    render(){
        return(
        <div className="AddNewItem">
            <h1>Add New Item Page</h1>
        </div>);
    }
}

export default AddNewItem;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“/App.css”；
从“./components/Home”导入{Home}；
从“./components/Products”导入{Products}；
从“./components/NoMatch”导入{NoMatch}；
从“./components/Layout”导入{Layout}；
从“./components/NavigationBar”导入{NavigationBar}；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

Product.js

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

import {Home} from './components/Home';
import {Products} from './components/Products';
import {NoMatch} from './components/NoMatch';
import {Layout} from './components/Layout';
import {NavigationBar} from './components/NavigationBar';    

class App extends Component {
  render(){
    return (
    <React.Fragment>
      <NavigationBar/>
      <Layout>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/products" component={Products} />
          <Route component={NoMatch} />
        </Switch>
      </Router>
      </Layout>
    </React.Fragment>
    );
  }
}

export default App;

import Items from './Items';
import AddNewItem from './AddNewItem';
import { Link } from 'react-router-dom';
import React, { Component } from 'react';


export const Products = () => (
    <div>
        <br />
        <h2>All Products</h2>
        <Link to={"./AddNewItem"} className="btn btn-primary">
        Add Item
        </Link>
        <Items/>
    </div>
);

import React, { Component } from 'react';
import {Table, Button} from 'react-bootstrap';


class Items extends Component {

    constructor(props){
        super(props);
        this.state = {
            items: [],
            isLoaded: false,
        }
    }

  componentDidMount() {
    const apiUrl = 'https://myGetAllItemsRestApi/Item';
    fetch(apiUrl)
      .then(response => response.json())
      .then((json) => {
          this.setState({
            isLoaded: true, items: json,
          })
      });
  }

   
  render() {
    var { isLoaded, items} = this.state;

    if(!isLoaded){
        return <div>Loading API response...</div>;
    }else{
        return(
            
            <div className="Items">
                              
                <br />
                <Table className="Table">
                    <thead>
                        <th>Image</th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Description</th>
                        <th>Number</th>
                        <th>Characteristics</th>
                        <th>Full Features</th>
                        <th>
                        {/* For Edit button */} 
                        </th>
                        <th>
                        {/* For Delete button */} 
                        </th>
                    </thead>
                    <tbody>
                        
                    {items.map(item =>(
                        <tr key={item.itemid}>
                            <td>ImageHolder</td>
                            <td>{item.itemid}</td>
                            <td>{item.item_name}</td>
                            <td>{item.item_price}</td>
                            <td>{item.item_description}</td>
                            <td>{item.item_number}</td>
                            <td>{item.item_characteristics}</td>
                            <td>{item.item_fullfeatures}</td>
                            <td><a href="#">Edit</a></td>
                            <td><a href="#">Delete</a></td>
                        </tr>
                    ))}
                    </tbody>
                </Table>
            </div>
            
        );
    }
  }
}

export default Items;

import React, { Component } from 'react';

class AddNewItem extends Component {
    render(){
        return(
        <div className="AddNewItem">
            <h1>Add New Item Page</h1>
        </div>);
    }
}

export default AddNewItem;

从“/Items”导入项目；
从“./AddNewItem”导入AddNewItem；
从'react router dom'导入{Link}；
从“React”导入React，{Component}；
导出常量产品=（）=>(


所有产品
添加项
);

Items.js

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

import {Home} from './components/Home';
import {Products} from './components/Products';
import {NoMatch} from './components/NoMatch';
import {Layout} from './components/Layout';
import {NavigationBar} from './components/NavigationBar';    

class App extends Component {
  render(){
    return (
    <React.Fragment>
      <NavigationBar/>
      <Layout>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/products" component={Products} />
          <Route component={NoMatch} />
        </Switch>
      </Router>
      </Layout>
    </React.Fragment>
    );
  }
}

export default App;

import Items from './Items';
import AddNewItem from './AddNewItem';
import { Link } from 'react-router-dom';
import React, { Component } from 'react';


export const Products = () => (
    <div>
        <br />
        <h2>All Products</h2>
        <Link to={"./AddNewItem"} className="btn btn-primary">
        Add Item
        </Link>
        <Items/>
    </div>
);

import React, { Component } from 'react';
import {Table, Button} from 'react-bootstrap';


class Items extends Component {

    constructor(props){
        super(props);
        this.state = {
            items: [],
            isLoaded: false,
        }
    }

  componentDidMount() {
    const apiUrl = 'https://myGetAllItemsRestApi/Item';
    fetch(apiUrl)
      .then(response => response.json())
      .then((json) => {
          this.setState({
            isLoaded: true, items: json,
          })
      });
  }

   
  render() {
    var { isLoaded, items} = this.state;

    if(!isLoaded){
        return <div>Loading API response...</div>;
    }else{
        return(
            
            <div className="Items">
                              
                <br />
                <Table className="Table">
                    <thead>
                        <th>Image</th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Description</th>
                        <th>Number</th>
                        <th>Characteristics</th>
                        <th>Full Features</th>
                        <th>
                        {/* For Edit button */} 
                        </th>
                        <th>
                        {/* For Delete button */} 
                        </th>
                    </thead>
                    <tbody>
                        
                    {items.map(item =>(
                        <tr key={item.itemid}>
                            <td>ImageHolder</td>
                            <td>{item.itemid}</td>
                            <td>{item.item_name}</td>
                            <td>{item.item_price}</td>
                            <td>{item.item_description}</td>
                            <td>{item.item_number}</td>
                            <td>{item.item_characteristics}</td>
                            <td>{item.item_fullfeatures}</td>
                            <td><a href="#">Edit</a></td>
                            <td><a href="#">Delete</a></td>
                        </tr>
                    ))}
                    </tbody>
                </Table>
            </div>
            
        );
    }
  }
}

export default Items;

import React, { Component } from 'react';

class AddNewItem extends Component {
    render(){
        return(
        <div className="AddNewItem">
            <h1>Add New Item Page</h1>
        </div>);
    }
}

export default AddNewItem;

import React，{Component}来自'React'；
从“react bootstrap”导入{Table，Button}；
类项扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：[]，
isLoaded:false，
}
}
componentDidMount（）{
康斯特阿皮乌尔酒店https://myGetAllItemsRestApi/Item';
获取（APIRL）
.then（response=>response.json（））
。然后（（json）=>{
这是我的国家({
isLoaded:true，items:json，
})
});
}
render（）{
var{isLoaded，items}=this.state；
如果（！已加载）{
返回加载API响应。。。；
}否则{
返回(


形象
身份证件
名称
价格
描述
数
特点
全功能
{/*用于编辑按钮*/}
{/*用于删除按钮*/}
{items.map（item=>(
图像支架
{item.itemid}
{item.item_name}
{item.item_price}
{item.item_description}
{item.item_number}
{item.item_特征}
{item.item_fullfeatures}
))}
);
}
}
}
导出默认项；

AddNewItem.js

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

import {Home} from './components/Home';
import {Products} from './components/Products';
import {NoMatch} from './components/NoMatch';
import {Layout} from './components/Layout';
import {NavigationBar} from './components/NavigationBar';    

class App extends Component {
  render(){
    return (
    <React.Fragment>
      <NavigationBar/>
      <Layout>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/products" component={Products} />
          <Route component={NoMatch} />
        </Switch>
      </Router>
      </Layout>
    </React.Fragment>
    );
  }
}

export default App;

import Items from './Items';
import AddNewItem from './AddNewItem';
import { Link } from 'react-router-dom';
import React, { Component } from 'react';


export const Products = () => (
    <div>
        <br />
        <h2>All Products</h2>
        <Link to={"./AddNewItem"} className="btn btn-primary">
        Add Item
        </Link>
        <Items/>
    </div>
);

import React, { Component } from 'react';
import {Table, Button} from 'react-bootstrap';


class Items extends Component {

    constructor(props){
        super(props);
        this.state = {
            items: [],
            isLoaded: false,
        }
    }

  componentDidMount() {
    const apiUrl = 'https://myGetAllItemsRestApi/Item';
    fetch(apiUrl)
      .then(response => response.json())
      .then((json) => {
          this.setState({
            isLoaded: true, items: json,
          })
      });
  }

   
  render() {
    var { isLoaded, items} = this.state;

    if(!isLoaded){
        return <div>Loading API response...</div>;
    }else{
        return(
            
            <div className="Items">
                              
                <br />
                <Table className="Table">
                    <thead>
                        <th>Image</th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Description</th>
                        <th>Number</th>
                        <th>Characteristics</th>
                        <th>Full Features</th>
                        <th>
                        {/* For Edit button */} 
                        </th>
                        <th>
                        {/* For Delete button */} 
                        </th>
                    </thead>
                    <tbody>
                        
                    {items.map(item =>(
                        <tr key={item.itemid}>
                            <td>ImageHolder</td>
                            <td>{item.itemid}</td>
                            <td>{item.item_name}</td>
                            <td>{item.item_price}</td>
                            <td>{item.item_description}</td>
                            <td>{item.item_number}</td>
                            <td>{item.item_characteristics}</td>
                            <td>{item.item_fullfeatures}</td>
                            <td><a href="#">Edit</a></td>
                            <td><a href="#">Delete</a></td>
                        </tr>
                    ))}
                    </tbody>
                </Table>
            </div>
            
        );
    }
  }
}

export default Items;

import React, { Component } from 'react';

class AddNewItem extends Component {
    render(){
        return(
        <div className="AddNewItem">
            <h1>Add New Item Page</h1>
        </div>);
    }
}

export default AddNewItem;

import React，{Component}来自'React'；
类AddNewItem扩展组件{
render（）{
返回(
添加新项目页面
);
}
}
导出默认AddNewItem；

问题是,

<Link to={"./AddNewItem"} className="btn btn-primary">
    Add Item
</Link>

添加项

当我单击添加项目时，它只会将我带到一个空白页（

http://localhost:3000/AddNewItem

）没有任何文本。我没有看到

添加新项目页面

我知道，一旦

在CRUD中创建
变得有意义，那么
更新
和
删除
就会更容易。
表中所有记录的显示都有效，但
CREATE-UPDATE-DELETE
无效

对于
UPDATE
和
DELETE
，我知道我必须找到一种方法来传递所选记录的
ID

如有任何建议或意见，我将不胜感激

谢谢大家!
 在你的
app.js
中，你需要声明你只声明了几条路线的所有路线

确保导入
AddNewItem
文件，然后在完成路由后，链接将正常工作

<Router>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/products" component={Products} />
    <Route path="/AddNewItem" component={AddNewItem} />
    <Route component={NoMatch} />
  </Switch>
</Router>


我选择了REACHJ以便我可以学习它。
：你是说React JS？还是真的达到JS？编辑：问题已更新（您指的是React JS）您在哪里注册了
AddNewItem
的
Route
？看起来您为
/products
注册了
路由，但不是为您希望在其中显示的添加新项目而注册的。
to=“/AddNewItem”
，而不是
to={./AddNewItem”}
，您需要为该组件创建路由。