我正在使用 React BrowserRouter,我想通过它在页面之间导航。最初,一个页面中有四张图像,单击一张图像后,该图像会在屏幕中打开。该图像下方有一个后退按钮,可将用户导航回包含四个图像的第一个屏幕。
代码是这样的
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import {FirstPage} from './FirstPage.js';
import {BrowserRouter,Route,Router} from 'react-router-dom';
class App extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div>
<BrowserRouter>
<Route path="/" component={FirstPage}><FirstPage/></Route>
</BrowserRouter>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('container'));
FirstPage.js
class FirstPage extends React.Component{
constructor(props){
super(props);
this.state={
list:[],
images:[],
isClicked:false
}
this.loadImages=this.loadImages.bind(this);
this.loadOne=this.loadOne.bind(this);
}
componentDidMount(){
window.addEventListener('load',this.loadImages);
}
loadImages(){
console.log("load");
var that=this;
$.ajax({
type:'GET',
url:'https://demo0813639.mockable.io/getPanos',
datatype:'jsonp',
success:function(result){
var images=that.state.images;
for(var i=0;i<result.length;i++){
that.state.images.push({"pano":result[i].pano,"name":result[i].name});
}
that.setState({
images:images
})
}
})
}
loadOne(pano){
this.setState({
isClicked:true,
imageUrl:pano
})
}
render(){
var list=this.state.list;
if(this.state.isClicked===false){
list=this.state.images.map((result)=>{
//console.log(result.name);
return(<div className="box">
<div className="label">{result.name}</div>
<img src={result.pano} className="image col-md-3" onClick={this.loadOne.bind(this,result.pano)}/>
</div>
)
})
}
else{
list.push(<Panorama imageUrl={this.state.imageUrl}/>)
}
return <div>{list}</div>;
}
}
module.exports={
FirstPage:FirstPage
}
全景.js
import 'aframe';
import 'aframe-particle-system-component';
import {Entity, Scene} from 'aframe-react';
import {Link} from 'react-router-dom';
class Panorama extends React.Component{
render(){
return(
<div>
<div className="pano">
<Scene>
<a-assets position="5 5 5">
<img id="myImage" src={this.props.imageUrl} crossorigin="anonymous"/>
</a-assets>
<a-sky src="#myImage"></a-sky>
</Scene>
</div>
<div className="goback"><Link to="/">Go back</Link></div>
</div>
)
}
}
module.exports={
Panorama:Panorama
}
上面的代码没有任何错误,但是也不起作用。 React Router的版本是v4。上面有什么问题吗?
最佳答案
看起来你并没有真正利用 React Router 的优势。原因<Link/>
不执行任何操作是因为从技术上讲您仍然与图像框位于同一页面上,因为您没有移动到另一个路径,因此该链接不会触发路径更改。
我创建了一个关于如何解决此问题的快速示例。当然,它不是您项目的精确复制品,但它让您了解如何解决此问题。
===说明
主应用
我们的主应用程序包含两条路线。一个用于选择图像,另一个用于查看图像。
查看图片
这将显示由首页组件发送的图像。这是一种方法,但您也可以将图像和事件图像存储在应用程序组件中,并将其发送到该子组件,这样您就不必将图像 url 保留在参数中。 (或者您可以使用 Redux 或其他一些全局状态管理器)。
首页
我们通过一个简单的数组列出一系列图像,并保留所选图像的事件索引。我们通过按钮将它们映射到 View ,并在单击它们后触发一个事件,该事件设置事件图像和重定向标志,将用户重定向到 image/:id
使用图像 url 进行路由。
当然,您的图像加载可以改进,但这超出了这个问题的范围。
在此处查看工作版本:https://codesandbox.io/s/pY2LyzAEr
===来源
import React from 'react';
import { render } from "react-dom";
import { BrowserRouter, Route, Router, Redirect, Switch, Link } from 'react-router-dom';
// *-------------------------
// | First Page
// *-------------------------
class FirstPage extends React.Component{
state = {
currentActive: null,
redirect: false,
images: ['https://cdn.pixabay.com/photo/2014/12/22/10/04/lion-577104__340.jpg', 'http://www.yosemite.com/wp-content/uploads/2013/07/Merced-Lake-back-of-Half-Dome_Kenny-Karst.jpg', 'http://www.japan-guide.com/g9/3060_12.jpg', 'https://cache-graphicslib.viator.com/graphicslib/thumbs674x446/3675/SITours/hong-kong-island-half-day-tour-in-hong-kong-114439.jpg']
}
viewImage = (evt) => {
this.setState({
currentActive: evt.target.dataset.image,
redirect: true
})
}
render(){
return this.state.redirect
? <Redirect to={`/image/${btoa(this.state.images[this.state.currentActive])}`} />
: (
<div>
{this.state.images.map((image, index) => {
return <button key={index} data-image={index} onClick={this.viewImage}>View Image {index + 1}</button>
})}
</div>
)
}
}
// *-------------------------
// | View Image Component
// *-------------------------
const ViewImage = (props) => {
return (
<div>
<img src={`${atob(props.match.params.id)}`} />
<div><Link to="/">Back</Link></div>
</div>
)
}
// *-------------------------
// | Main App.JS
// *-------------------------
class App extends React.Component {
render(){
return(
<div>
<BrowserRouter>
<Switch>
<Route exact path="/" component={FirstPage}/>
<Route path="/image/:id" component={ViewImage}/>
</Switch>
</BrowserRouter>
</div>
)
}
}
render(<App />, document.getElementById("root"));
关于javascript - 路由器在 React 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45530735/