React router 在只有 url 更改之后渲染组件一次

Question

我的页面有一个导航栏和一个侧边栏。

导航栏由主页和博客组成

博客将呈现 BlogHome 组件，该组件将从 db 获取链接，单击任何链接将呈现 BlogContent 组件。

假设侧边栏列出了 Blog1、Blog2 和 Blog3。如果我单击 Blog1，它会将 Blog1 的内容正确呈现到它的一侧，但如果我再次单击 Blog2，它只会更改 URL，而不是 Blog2 的内容。

请看看我的代码：

导航栏.js

      <Router>

            <Container className="p-0" fluid={true}>

                <Navbar className="border-bottom" bg="transparent" expand="lg">

                    <Navbar.Brand>{global.config.appname}</Navbar.Brand>

                    <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />

                    <Navbar.Collapse id="navbar-toggle">

                        <Nav className="ml-auto">

                            <Link className="nav-link" to="/">Home</Link>

                            <Link className="nav-link" to="/blogs/main">Blogs</Link>

                            <Link className="nav-link" to="/contact">Contact</Link>

                        </Nav>

                    </Navbar.Collapse>

                </Navbar>

                </Container>

                <Switch>

                    <Route exact path="/" component={Home}></Route>

                    <Route exact path="/blogs/main" component={BlogHome}></Route>

                </Switch>

            </Router>

BlogHome.js

export default class BlogHome extends Component {

    constructor(props)

    {

        super(props);

        this.state = { data: null,route:null };

    }

    componentDidMount = () => {

        console.log("BlogHome");

        BlogDataService.getAll().then(data => {

            let data_temp = []

            let cnt = 0;

            for (let item of data.data) {

                data_temp.push(

                <MenuItem key={cnt++} icon={<FaBlog />}>

                    <Link to={"/blogs/main/" + item.id}>{item.title}</Link>

                </MenuItem>

                );

                

            }

            this.setState({ data: data_temp });

        })

    }

Answer 1

您的 item_id 只设置了一次并且根本没有改变。第一次加载组件时它会工作但是当你第二次加载时你传递了新的项目 ID 但是组件不知道这个变化因此无法做任何事情。尝试创建一个获取数据的函数。在 componentDidmount 中调用相同的函数。现在，当它获得新道具时，就该检查了。使用 componentDidUpdate。componentDidUpdate(prevProps, prevState){&nbsp;&nbsp; &nbsp;if(prevProps.blogId != this.props.blogId){&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;item_id: this.props.blogId&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;}, () => { call the function to get the data } )&nbsp; }}