Question

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

这是我的家.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

您的实施存在一些问题，首先尝试从Router中取出map组件，然后像这样编写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路由器不接受多个子节点，因此您不必为每个路由创建一个路由器，而只需使用一个路由器并将所有路由包裹在其中，并围绕它们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>
);

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

1 个答案: