组件中的React.js路由必须根据URL调用其他组件
组件中的React.js路由必须根据URL调用其他组件
提问于 2020-04-25 20:30:53
我开始学习反应，并试图在我的旧项目中实现它。问题如下。
有带行的App.js
import React from 'react';
import {BrowserRouter, Route} from 'react-router-dom';
import Bets from './components/bets/bets';
function App() {
return (
<BrowserRouter>
<Route exact path="/bets" component={Bets}/>
<Route exact path="/bets/live" component={Bets}/>
<Route exact path="/bets/ended" component={Bets}/>
</BrowserRouter>
);
}
export default App;路由称Bets.js为Bets.js的内容
import React from 'react';
import {NavLink} from 'react-router-dom';
import BetsLive from './bets_live';
import BetsEnded from './bets_ended';
import BetsUpcoming from './bets_upcoming';
const Bets = (props) => {
return (
<div className="row container">
<NavLink to="/bets">
Upcomming
</NavLink>
<NavLink to="/bets/live">
Live
</NavLink>
<NavLink to="/bets/ended">
Results
</NavLink>
// здесь
</div>
);
}
export default Bets;其中"// here"应该是一个特定的组件，具体取决于URL。下面的例子
/bets = <BetsUpcoming/>
/bets/ended = <BetsEnded/>
/bets/live = <BetsLive/>如何解决这个问题？有一个想法是通过道具(在路由中传递某种参数)，并通过验证(代码堆的代码堆)进行返回。
Stack Overflow用户
发布于 2020-04-25 20:54:10
我将使用路由参数(就像您提到的那样，类似于道具)：
import React from 'react';
import {BrowserRouter, Route} from 'react-router-dom';
import Bets from './components/bets/bets';
function App() {
return (
<BrowserRouter>
<Route path="/bets/:whatbets" component={Bets}/>
</BrowserRouter>
);
}
export default App;import React from 'react';
import {NavLink, useParams} from 'react-router-dom';
import BetsLive from './bets_live';
import BetsEnded from './bets_ended';
import BetsUpcoming from './bets_upcoming';
const Bets = (props) => {
const {whatbets} = useParams()
return (
<div className="row container">
<NavLink to="/bets">
Upcomming
</NavLink>
<NavLink to="/bets/live">
Live
</NavLink>
<NavLink to="/bets/ended">
Results
</NavLink>
{whatbets === 'live' && <Live />}
{whatbets === 'ended' && <Ended />}
{!whatbets && <WithoutParams />}
</div>
);
}
export default Bets;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61432203
复制相关文章
相似问题
腾讯云开发者
