- 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 条
- 全部回答
-
╰°放开那萌比o- 普通会员 1楼
在React中,组件依赖路由的核心思想是利用React Router库的组件锚点功能来实现动态路由。React Router是React库的一个重要组件,它允许我们在React组件中定义URL路由,这些路由可以指向其他组件、状态改变或者数据渲染。
以下是一个简单的例子,展示了如何使用React Router在React组件中依赖路由:
- 创建一个基本的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; ```
-
在
Home组件中使用<Route>标签来定义路由。<Route>标签包含以下组件: -
path属性:这是路由的URL路径,它必须以斜杠/开头,后面跟着一个或多个路径名(如果有的话)。 component属性:这是路由的组件,它将渲染在路由路径对应的页面上。如果路径不存在,component将是一个空的函数,表示默认的渲染。
例如,假设我们有一个子路由
/about,这个路由需要一个<h1>元素来渲染:jsx <Route path="/about" component={() => <h1>About Us</h1>} />- 在父组件中,我们需要定义一个变量来存储
<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; ```
- 在
App组件中,我们使用<Route>的path属性来定义<Home>组件的路径,并使用<Route>的component属性来引用<Home>组件。这样,App组件就会渲染一个包含<Home>组件的<Switch>组件,并且在Home组件中引用了子路由/about。
通过这种方式,我们就可以在React组件中依赖路由,通过JavaScript的路由管理机制,实现动态路由,使得组件的路由配置可以在不同的情况下根据需要进行改变,从而提高组件的灵活性和可扩展性。
- 创建一个基本的React组件,例如
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

