组件中的React.js路由必须根据URL调用其他组件

Question

我开始学习react，并试图在我的旧项目中实现它。问题如下。

拥有带行的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.jsBets.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/>

如何解决这个问题？有一种想法是通过props(在Route中传递某种参数(来完成，并通过验证(代码堆码堆(来返回

Answer 1

在路由中添加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>
);
}

您还可以使用"切换"one_answers"路由"嵌套路由，请参阅文档中的示例。

Answer 2

您需要在React Router文档中查看更多信息

正如我正确理解的那样，你需要实现一个简单的待办事项列表路由器，根据点击按钮移动到相应的组件。然后你应该把相应的组件放在相应的路线上：

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;

关键时刻是，您应该在<Route />的component道具中传递组件，您希望在相应的路径中看到。

Answer 3

我会使用路由参数(有点像你提到的道具(：

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;