reactjs - 来自 SideBar 组件的 Reactjs 路由不呈现任何内容

Question

我希望每个人都做得很好，安全。我最近一直忙于我的爱好项目。我有两个组件，一个名为 Home 组件，另一个是 Sidebar 组件

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;

我的 Home 组件如下所示；

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>
        )
    }
}

标签： reactjs

Answer 1

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