组件中的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/>如何解决这个问题？有一个想法是通过道具(在路由中传递某种参数)，并通过验证(代码堆的代码堆)进行返回。
回答 3
Stack Overflow用户
发布于 2020-04-25 20:47:01
在线路中添加BetsLive、BetsEnded和BetsUpcoming：
function App() {
return (
<BrowserRouter>
<Bets /> { /* use NavLink to make link to specific routes. */ }
<Switch>
<Route exact path="/bets" component={BetsUpcoming}/>
<Route exact path="/bets/live" component={BetsLive}/>
<Route exact path="/bets/ended" component={BetsEnded}/>
</Switch>
</BrowserRouter>
);
}您也可以使用交换机和路由嵌套路由，检查文档中的示例。
Stack Overflow用户
发布于 2020-04-25 20:53:01
您需要在React路由器文档中看得更多
正如我正确理解的，您需要实现一个简单的ToDo列表路由器，并根据单击按钮移动到相应的组件。然后，您应该在相应的路由中放置相应的组件：
import React from 'react';
import {BrowserRouter, Route} from 'react-router-dom';
import Bets from './bets';
import BetsLive from './bets_live';
import BetsEnded from './bets_ended';
import BetsUpcoming from './bets_upcoming';
function App() {
return (
<>
<Bets />
<BrowserRouter>
<Route exact path="/bets" component={Bets}/>
<Route exact path="/bets/live" component={BetsUpcoming}/>
<Route exact path="/bets/ended" component={BetsEnded}/>
</BrowserRouter>
</>
);
}在Bets组件中，实现了路线上的移动：
import React from 'react';
import {NavLink} from 'react-router-dom';
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;关键时刻是，您应该在component的<Route />支柱中传递组件，您希望在相应的路径中看到该组件。
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
复制相关文章
相似问题
腾讯云开发者
