javascript - Reactjs - 路由期间道具不改变

Question

我有一个BrowserRouter基于Route. 这些组件中的大多数都具有相似的标记。

所以，我创建了一个Wrapper组件，它将接收道具，并{children}在提供时渲染它。这在'sWrapper中被调用。Route

import React, {Component} from 'react'
import Context from '../../provider'
import { 
    BrowserRouter,
    Route,
    Redirect,
    Switch,
} from "react-router-dom"
import {
    Container,
    Row,
    Col,
} from 'reactstrap'
import Profile from './ContentComponent/Profile'
import Subreddit from './ContentComponent/Subreddit'
import PostExpanded from './ContentComponent/PostExpanded'
import InfoComponent  from './InfoComponent'
import SwitchTab from './ContentComponent/Subreddit/SwitchTab'
import NewPost from './ContentComponent/assets/NewPost'
import './style.css'

class Wrapper extends React.Component {
    componentDidMount() {
        this.props.setActiveTab(this.props.activeTab);
    }

    render() {
        {console.log('Wrapper props: ', this.props)}
        return (
            <Row>
                <Col md='8' id='content-block'>
                    <SwitchTab />
                    {this.props.children}
                </Col>
                <Col md='4' id='info-block'>
                    <InfoComponent info={this.props.info} {...this.props}/>
                </Col>
            </Row>
        )
    }
}

export default class BodyComponent extends Component {
    render() {
        return (
            <BrowserRouter>
                <Context.Consumer>
                    {context => {
                        return (
                            <Container>
                                <Switch>
                                    <Route 
                                        exact 
                                        path='/' 
                                        render={() =>
                                            <Redirect to='r/home/' />
                                        }
                                    />
                                    <Route 
                                        exact 
                                        path='/r/home/' 
                                        render={() => 
                                            <Wrapper 
                                                setActiveTab={context.toggleTab}
                                                activeTab={'1'} 
                                                info='home'
                                            />
                                        }
                                    />
                                    <Route 
                                        exact 
                                        path='/r/popular/' 
                                        render={() => 
                                            <Wrapper 
                                                setActiveTab={context.toggleTab} 
                                                activeTab={'2'} 
                                                info='popular'
                                            />
                                        }
                                    />
                                    <Route 
                                        exact 
                                        path='/r/all/' 
                                        render={() =>
                                            <Wrapper 
                                                setActiveTab={context.toggleTab} 
                                                activeTab={'3'} 
                                                info='all'
                                            />
                                        }
                                    />
                                    <Route 
                                        exact 
                                        path='/u/:username/' 
                                        render={(props) => {
                                            return (
                                                <Wrapper 
                                                    setActiveTab={context.toggleTab} 
                                                    activeTab={'4'}
                                                    info='user'
                                                    user={props.match.params.username}
                                                >
                                                    <Profile username={props.match.params.username} />
                                                </Wrapper>
                                            )
                                        }}
                                    />
                                    <Route
                                        exact
                                        path = '/r/:subreddit/new/'
                                        render={(props) => {
                                            return (
                                                <Wrapper 
                                                    setActiveTab={context.toggleTab} 
                                                    activeTab={'4'} 
                                                    info='subreddit'
                                                    subreddit={props.match.params.subreddit}
                                                >
                                                    <NewPost />
                                                </Wrapper>
                                            )
                                        }}
                                    />
                                    <Route
                                        exact
                                        path = '/r/:subreddit/post/:postid/'
                                        render={(props) => {
                                            return (
                                                <Wrapper 
                                                    setActiveTab={context.toggleTab} 
                                                    activeTab={'4'} 
                                                    info='subreddit'
                                                    subreddit={props.match.params.subreddit}
                                                >
                                                    <PostExpanded
                                                        subreddit={props.match.params.subreddit}
                                                        postid={props.match.params.postid}
                                                    />
                                                </Wrapper>
                                            )
                                        }}
                                    />
                                    <Route
                                        exact
                                        path='/r/:subreddit/'
                                        render={(props) => {
                                            return (
                                                <Wrapper 
                                                    setActiveTab={context.toggleTab} 
                                                    activeTab={'4'} 
                                                    info='subreddit'
                                                    subreddit={props.match.params.subreddit}
                                                >
                                                    <Subreddit subreddit={props.match.params.subreddit} />
                                                </Wrapper>
                                            )
                                        }}
                                    />
                                    <Route
                                        exact
                                        path = '/new/'
                                        render={(props) => {
                                            return (
                                                <Wrapper
                                                    setActiveTab={context.toggleTab}
                                                    activeTab={'4'}
                                                    info='new'
                                                >
                                                    <NewPost />
                                                </Wrapper>
                                            )
                                        }}
                                    />
                                </Switch>
                            </Container>
                        )
                    }}
                </Context.Consumer>
            </BrowserRouter>
        )
    }
}

我在这里面临多个问题，我认为它们都可以一次解决，我不知道如何？

1. 当我 使用以下方式更改URL时， Wrapper 道具没有改变：props.history.push

   <NavItem>
       <NavLink
           className={classnames({ active: context.activeTab === '1' })}
           onClick={() =>{
               context.toggleTab('1');
               this.props.history.push('/r/home/')
           }}
       >
       Home
       </NavLink>
   </NavItem>
   <NavItem>
       <NavLink
           className={classnames({ active: context.activeTab === '2' })}
           onClick={() => {
               context.toggleTab('2');
               this.props.history.push('/r/popular/')
           }}
       >
       Popular
       </NavLink>
   </NavItem>
   

标签： javascriptreactjs

Answer 1

我想我在浏览我的代码时遇到了问题。所以，当我想props.history.push在我的HeaderComponent. 我遇到了错误，所以我用它包装BrowserRouter并导出withRouter()它使我能够使用props.history.push

所以，在不知不觉中我创建了 2 BrowserRouter：

<React.Fragment>
    <BrowserRouter>
        <NavbarComponent />
        <TabComponent />
    </BrowserRouter>
    <BrowserRouter>
        <Switch>
            <Route ... />
            <Route ... />
        </Switch>
    </BroserRouter>
</React.Fragment>

因此，我正在更改URL，TabComponent并希望它能够更改我Route的 's 并修改内容。

拥有一个全局BrowserRouter（不要认为全局是正确的词，但是）解决了这个问题。

<React.Fragment>
    <BrowserRouter>
        <NavbarComponent />
        <TabComponent />
        <Switch>
            <Route ... />
            <Route ... />
        </Switch>
    </BroserRouter>
</React.Fragment>