账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react 组件依赖路由的核心思想是什么
    • 2018-08-09 00:00
    • 11
    39
    0

    发现我的组件不依赖路由,在页面刷新后,只显示单个组件而没有父级组件呢

    function RouterConfig({ history }) {
      return(
      <Router history={history}>
          <Switch>
          <Route exact path="/" component={lsPage}/>
          <Route exact path="/layout" component={layout} />
          <Route exact path="/404" component={notFound}/>
          <Route  exact path="/login" component={loginPage} />
          <Route  exact path="/sign" component={signUpPage} />
          <Route  exact path="/personal" component={personPage} />
          <Route  exact path="/find" component={findPage} />
          <Route exact  path="/mood" component={moodPage} />
          <Route  exact path='/display' component={displayPage}/>
          <Route  exact path='/userset' component={setPage}/>
          <Route  exact path='/pwdchange' component={pwdchangePage}/>
          </Switch>
      </Router>
      )
    } 
    export default RouterConfig;
    
    render(){
            return(
                <div className={style.wrap}>
                    <Router>
                        <Layout style={{height:'100%',padding: '24px 0'}}>
                            <Header className={style.header}>
                            </Header>
                            <Content style={{ padding: '0 50px',minHeight: 480  }}>
                                <div className={style.leftSide}>
                                    <Personal/>
                                    <Nav/>
                                </div>
                                <div className={style.rightSide}>
                                    <Route path='/layout' exact component={welcomeP}/>
                                    <Route path='/personal'  component={personal}/>
                                    <Route path='/find'  component={find}/>
                                    <Route path='/mood'  component={mood}/>
                                    <Route path='/display'  component={display}/>
                                    <Route path='/userset'  component={userset}/>
                                    <Route path='/pwdchange'  component={pwdchange}/>
                                </div>
                            </Content>
                            <Footer style={{ textAlign: 'center',padding:'0'}}>
                                <p>
                                    <a className={style.me} onClick={this.handleExit}>退出登录</a>
                                </p>
                            </Footer>
                        </Layout>
                    </Router>
                </div>
            )
        }

    页面刷新后,url localhost:8000/display 页面就只有display的组件,其他的都没有了,请问大大,错在哪里呀

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • ╰°放开那萌比o- 普通会员 1楼

      在React中,组件依赖路由的核心思想是利用React Router库的组件锚点功能来实现动态路由。React Router是React库的一个重要组件,它允许我们在React组件中定义URL路由,这些路由可以指向其他组件、状态改变或者数据渲染。

      以下是一个简单的例子,展示了如何使用React Router在React组件中依赖路由:

      1. 创建一个基本的React组件,例如Home组件,它需要访问一个特定的URL:

      ```jsx import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

      function Home() { return (

      Welcome to Home

      } />

      About Us

      } /> ); }

      export default Home; ```

      1. 在Home组件中使用<Route>标签来定义路由。<Route>标签包含以下组件:

      2. path属性:这是路由的URL路径,它必须以斜杠/开头,后面跟着一个或多个路径名(如果有的话)。

      3. component属性:这是路由的组件,它将渲染在路由路径对应的页面上。如果路径不存在,component将是一个空的函数,表示默认的渲染。

      例如,假设我们有一个子路由/about,这个路由需要一个<h1>元素来渲染:

      jsx <Route path="/about" component={() => <h1>About Us</h1>} />

      1. 在父组件中,我们需要定义一个变量来存储<Route>的引用,这样我们就可以在Home组件中引用它:

      ```jsx import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

      function App() { const homeRoute = ( } /> );

      return (

      React App

      Child Component

      {homeRoute}
      ); }

      export default App; ```

      1. 在App组件中,我们使用<Route>的path属性来定义<Home>组件的路径,并使用<Route>的component属性来引用<Home>组件。这样,App组件就会渲染一个包含<Home>组件的<Switch>组件,并且在Home组件中引用了子路由/about。

      通过这种方式,我们就可以在React组件中依赖路由,通过JavaScript的路由管理机制,实现动态路由,使得组件的路由配置可以在不同的情况下根据需要进行改变,从而提高组件的灵活性和可扩展性。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部