我已经创建了pdf文件列表，并希望通过使用react-pdf和react-router-dom npm软件包在新选项卡中呈现它们。
我创建了多条路线，在这里我传递组件以呈现作为道具传递的pdf文件。我还使用标记和列表渲染创建了多个链接，每个链接都指向一条唯一的路线。
如果我在与链接相同的页面上呈现pdf文件，则链接和路线工作正常。但是，在尝试在单独的选项卡上呈现pdf时，该路线不会呈现该组件。
请帮助。 我正在添加代码段供您参考。
使用react-pdf的pdf呈现组件的代码
<div id="p-float">
<div class="p-float"><div class="p-float-in">
<img class="p-img" src="IMAGES\subtle.jpg" alt = subtle_art/ ><br/>
<div class="p-name">Subtle Art of not giving an F</div>
<div class="p-price">$9.99</div>
<div class="product">
<div class = "amount"> Amount:<input type = "number" class="amn" name = "num" value = "0" min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div>
</div>
</div></div>
<div class="p-float"><div class="p-float-in">
<img class="p-img" src="IMAGES\everything.jpg" alt = every/ ><br/>
<div class="p-name">Everything is <br/> F</div>
<div class="p-price">$9.99</div>
<div class="product">
<div class = "amount"> Amount:<input type = "number" class = "amn" name = "num" value = "0" min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div>
</div>
</div></div>
<div class="p-float"><div class="p-float-in">
<img class="p-img" src="IMAGES\work.jpg" alt = deepw/ ><br/>
<div class="p-name">Deep </br>Work </div>
<div class="p-price">$9.99</div>
<div class="product">
<div class = "amount"> Amount:<input type = "number" class="amn" name = "num" value = "0" min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div>
</div>
</div></div>
<div class="p-float"><div class="p-float-in">
<img class="p-img" src="IMAGES\giant.jpg" alt = gnt/ ><br/>
<div class="p-name">Awaken the giant within</div>
<div class="p-price">$9.99</div>
<div class="product">
<div class = "amount"> Amount:<input type = "number" class="amn" name = "num" value = "0" min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div>
</div>
</div></div>
<div class="p-float"><div class="p-float-in">
<img class="p-img" src="IMAGES\habits.jpg" alt = hbts/ ><br/>
<div class="p-name">7 Habits of highly effective people</div>
<div class="p-price">$9.99</div>
<div class="product">
<div class = "amount"> Amount:<input type = "number" class = "amn" name = "num" value = "0" min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me" /> Buy Me </div>
</div>
</div></div>
<div class="p-float"><div class="p-float-in">
<img class="p-img" src="IMAGES\anything.jpg" alt = any/ ><br/>
<div class="p-name">Achieve anything in 1 year</div>
<div class="p-price">$9.99</div>
<div class="product">
<div class = "amount"> Amount:<input type = "number" class="amn" name = "num" value = "0" min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div>
</div>
</div></div>
</div>
<a href="#" onclick="displayinfo()">got to shopping cart</a>在链接和pdf组件呈现在同一页面上并且一切正常时进行编码。
config.log代码，指示将pdf组件呈现在单独的选项卡上，但react-router不能呈现该组件。
除反应片段外，其余与上述相同。
import React, { Component } from 'react'
import { Document,Page } from 'react-pdf';
import { pdfjs } from 'react-pdf';
import {withRouter} from 'react-router-dom';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
const highlightPattern = (text_lower, pattern) => {
const splitText = text_lower.split(pattern);
if (splitText.length <= 1) {
return text_lower;
}
const matches = text_lower.match(pattern);
return splitText.reduce((arr, element, index) => (matches[index] ? [
...arr,
element,
<mark key={index}>
{matches[index]}
</mark>,
] : [...arr, element]), []);
};
class PdfComponent extends Component {
constructor(props) {
super(props)
this.state = {
numPages : null,
pageNumber:1
}
}
componentDidMount =()=>
{
console.log("creating a route for the file index : ", this.props.unique,"filename is: ", this.props.filename)
}
onDocumentLoadSuccess = (document) => {
var {numPages} = document;
this.setState(
{numPages}
)
};
changePage = (offset) =>
{
this.setState(prevState =>({pageNumber : prevState.pageNumber + offset}))
}
nextPage =() => this.changePage(1)
prevPage =() => this.changePage(-1)
makeTextRenderer = searchText => textItem => highlightPattern(textItem.str.toLowerCase(), searchText);
render() {
const {filename,searchkey} = this.props
console.log(filename,searchkey)
return (
<div style={{ width: 300, height:500, display:"table", position: "relative",left:"40%" }} >
<Document
file={filename}
onLoadSuccess={this.onDocumentLoadSuccess}
wrap ={false}
>
<Page pageNumber={this.state.pageNumber} width={300} height = {500}
customTextRenderer={this.makeTextRenderer(searchkey.toLowerCase())
} size = "A4"
/>
</Document>
<div>
<p>
Page {this.state.pageNumber || (this.state.numPages ? 1 : '--')} of {this.state.numPages || '--'}
</p>
<button
type="button"
disabled={this.state.pageNumber <= 1}
onClick={this.prevPage}
>
Previous
</button>
<button
type="button"
disabled={this.state.pageNumber >= this.state.numPages}
onClick={this.nextPage}
>
Next
</button>
</div>
<hr/><hr/>
</div>
)
}
}
export default PdfComponent
请帮助。