反应路由器在只有 url 改变之后渲染组件一次答案

【问题标题】：React router renders component once after that only url changes反应路由器在只有 url 改变之后渲染组件一次
【发布时间】：2020-08-10 16:06:30
【问题描述】：

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

导航栏由主页和博客组成

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

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

请看我的代码：

Navbar.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 });
        })
    }
    render() {
        return (
            <Router>
                <div style={{ display: "flex" }}>
                <ProSidebar>
                    <Menu iconShape="square">
                        {this.state.data}
                    </Menu>
                </ProSidebar>
                    
                <Switch>
                    <Route exact path={"/blogs/main/:blogId"} component={BlogContent}></Route>
                </Switch>
                </div>
            </Router>
        );
    }
}

BlogContent.js


export default class BlogContent extends Component {
    constructor(props) {
        super(props);
        const contentState = convertFromRaw(content);
        this.state = {
            contentState,
            item_id: this.props.match.params.blogId,
            title:null
        }
        console.log(this.props.match);
    }

    onContentStateChange: function = (contentState) => {
        this.setState({
            contentState,
        });
    };
    componentDidMount = () => {
        BlogDataService.get(this.state.item_id).then(data => {
            console.log(data);
            this.setState({ title: data.data.title })
        });
    }
    render() {
        const { contentState } = this.state;
        return (
            <Router>
            <div style={{padding:"10px"}}>
                <div style={{padding:"50px",fontSize:"50px"}}>
                    {this.state.title}
                </div>
            <Editor
                wrapperClassName="demo-wrapper"
                editorClassName="demo-editor"
                onContentStateChange={this.onContentStateChange}
                    />
            <Route exact path={"/blogs/main/1"} component={BlogContent}></Route>
                </div>
            </Router>
        );
    }
}

感谢您的阅读:)

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

您的 item_id 只设置了一次，并且根本没有改变。第一次加载组件时它会工作，但是当您第二次执行时，您传递新的项目 ID，但组件不知道此更改，因此无法执行任何操作。

尝试创建一个获取数据的函数。相同的函数在 componentDidmount 中调用它。现在，当它获得新道具时，是时候检查了。使用 componentDidUpdate。

componentDidUpdate(prevProps, prevState){ 
   if(prevProps.blogId != this.props.blogId){
        this.setState({
           item_id: this.props.blogId 
       }, () => { call the function to get the data } )
  }
}

【讨论】：