来自边栏组件的Reactjs路由不会渲染任何内容

Question

我希望每个人都过得很好，安全。最近我一直忙于我的业余项目。我有两个组件，一个名为主页组件，另一个是边栏组件

function Sidebar() {
const [videos, setVideos] = useState([])
useEffect(() => {
const fetchData = async () => {
const response = await fetch(
"http://192.168.0.178:4000/videos"
);
const data = await response.json();
setVideos(data);
};
fetchData();
}, [])
return (
<div className="sidebar">

<Col sm={3} className="side">
{videos.slice(0, 4).map(video =>
<Card key={video.id}>
<Card.Header>{video.duration}</Card.Header>
<Card.Img variant="top" src={`http://192.168.0.178:4000${video.poster}`} className="imgside" />
<Card.Body className="cbody">
<Link to={`/player/${video.id}`}>
<Card.Text>
{video.name}
</Card.Text>
</Link> 
</Card.Body>
</Card>
)}

</Col>
</div>
)
}
export default Sidebar;

我有我的主页组件如下；

export default class Home extends React.Component {
constructor() {
super();
this.state = {
videos: []
};
}
async componentDidMount() {
try {
const response = await fetch('http://192.168.0.178:4000/videos');
const data = await response.json();
this.setState({ videos: [...data] });
} catch (error) {
console.log(error);
}
}

render() {



return (
<div className='homepage'>
<Container fluid>
<Row>
<Col sm={12}>
<CardDeck>
{this.state.videos.slice(0, 3).map(video =>
<Card style={{ width: '25rem', color: '#000' }} key={video.id}>
<Card.Img variant="top" src={`http://192.168.0.178:4000${video.poster}`} />
<Card.Body>
<Card.Title>{video.duration}</Card.Title>
<Card.Text>
{video.name}
</Card.Text>
<Link to={`/player/${video.id}`}>
<Button variant="primary">IZLE</Button>
</Link>
</Card.Body>
</Card>
)}
</CardDeck>
</Col>
</Row>

<Row>
<Col sm={12}>
<CardDeck>
{this.state.videos.slice(7, 10).map(video =>
<Card style={{ width: '25rem', color: '#000' }} key={video.id}>
<Card.Img variant="top" src={`http://192.168.0.178:4000${video.poster}`} />
<Card.Body>
<Card.Title>{video.duration}</Card.Title>
<Card.Text>
{video.name}
</Card.Text>
<Link to={`/player/${video.id}`}>
<Button variant="primary">IZLE</Button>
</Link>
</Card.Body>
</Card>
)}
</CardDeck>

</Col>
</Row>
</Container>


</div>
)
}
}

每当我尝试从主页组件转到我的播放器视图时，它确实有效，但当我尝试从侧边栏转到播放器视图时它只是更改了url，但没有呈现视图。简言之，侧边栏是从app.js组件中呈现的，因为我很想把它放在我的播放器视图和主视图中，但链接在这两个视图中都不起作用。有人知道问题出在哪里吗？谢谢！

下面你可以看到我的应用程序组件

function App() {
return (
<div className="App">
<header className='App-header'>
<Navigation/>
</header>
<Sidebar/>
<Router>
<Switch>
<Route exact path="/" component={Home}></Route>
<Route path="/player/:id" component={Player}></Route>
</Switch>
</Router>
</div>
);
}

export default class Player extends Component {
constructor(props) {
super(props);
this.state = {
videoId: this.props.match.params.id,
videoData: [],
};
}
async componentDidMount() {
try {
const res = await fetch(`http://localhost:4000/video/${this.state.videoId}`);
const data = await res.json();
this.setState({ videoData: data });
} catch (error) {
console.log(error);
}
}
render() {
return (
<div className="player">
<header className="player-header">
<h1>SIKIS</h1>
</header>
<video controls autoPlay>
<source src={`http://localhost:4000/video/${this.state.videoId}`} type="video/mp4"></source>
</video>
<h1>{ this.state.videoData.name }</h1>
</div>
)
}
}

Answer 1

原因是您在Router之外使用Link您的主页是在路由器组件中呈现的。但是你的边栏在路由器之外。