从SideBar组件进行Reactjs路由不会呈现任何内容

如何解决从SideBar组件进行Reactjs路由不会呈现任何内容

我希望每个人都事事安逸。最近我最近一直在忙于自己的业余爱好项目。我有两个组件，一个叫做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;

我的家庭组件如下；

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>

        )
    }
}

每当我尝试从home组件进入播放器视图时，它确实起作用，但是，当我尝试从侧边栏播放器视图时，它只是更改了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>
        )
    }
}

解决方法

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