使用 react 路由器在 reactjs 中从一个页面导航到另一个页面

Question

您好，我是 reactjs 新手，并尝试通过使用 react 路由器单击链接从一个页面导航到另一个页面。我有一个 home.js，其中有一些地方名称的列表，我想单击其中一个名称，以便它应该转到其详细信息页面，即 about.js。 到目前为止，我尝试了下面提到的代码，但它不起作用，通过单击我无法导航到关于页面的链接。任何帮助将不胜感激。

这是我的 home.js

import React from 'react';
import data from './data.json';
import {Link, BrowserRouter as Router,Route} from 'react-router-dom'; 
import About from './about.js'


 export var rows = data.map((row) => 
     <Router>
      <div className="Display-items">
        <li> <Link to="/about" onClick={handleClick.bind(this,row)} target="_blank">{row.name}</Link > &nbsp; &nbsp;  {row.price} &nbsp; &nbsp; <img src = {row.image} height="50" width="50" alt="Preview"/></li>
        <Route path='/about' component={About}/>
      </div>
     </Router>
      );


 function handleClick(row,e) {
    e.preventDefault();
    console.log(row.name, 'was clicked');
  }



 export function RenderList(rows){
      return(
        <div>
          <li> Name &nbsp; &nbsp; Price &nbsp; &nbsp; Picture </li>
          {rows}
        </div>
      ); 
   }


  

这是我的 about.js

import React,{Component} from 'react';

 class About extends Component{
      render(){
        return(
          <div>
            <h2>Hello!</h2>
          </div>
        );
      }
    }
 export default About;

Answer 1

您的实现存在几个问题，首先尝试从您的map 中取出Router 组件，然后像这样编写您的RenderList：

export function RenderList(rows){

    return(
      <div>
      <li> Name &nbsp; &nbsp; Price &nbsp; &nbsp; Picture </li>
      <Router basename={props.path}>
        <div>
          <Route path='/about' component={About} />
        </div> 
      </Router>
       {rows}
      </div>
    ); 

}

React 路由器不接受多个子节点，因此无需为每个 Route 创建一个路由器，您可以只使用一个路由器并将所有 Route 包裹在其中，并用 div 包围它们。

下一步，您的map 应如下所示：

export var rows = data.map((row) =>
    <div className="Display-items">
      <li> <Link to="/about" onClick={handleClick.bind(this, row)} target="_blank">{row.name}</Link > &nbsp; &nbsp;  {row.price} &nbsp; &nbsp; <img src={row.image} height="50" width="50" alt="Preview" /></li>
    </div>
);