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

我开始学习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;

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;

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route}；
从“./components/Bets/Bets”导入赌注；
函数App（）{
返回(
);
}
导出默认应用程序；

路由调用Bets.jsBets.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;

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;

从“React”导入React；
从'react router dom'导入{NavLink}；
从“./bets_live”导入现场投注；
从“./bets_end”导入已结束的赌注；
从“./bets_uncoming”导入即将到来的赌注；
常量下注=（道具）=>{
返回(
升级
居住
结果
// здесь
);
}
出口违约押注；

其中“//此处”应该是一个特定的组件，具体取决于URL。下面的例子

/bets  =  <BetsUpcoming/>
/bets/ended  =  <BetsEnded/>
/bets/live = <BetsLive/>

/bets=
/下注/结束=
/投注/现场=

---

如何解决这个问题？有一个想法是通过道具（在路线中传递某种参数），并通过验证进行返回（代码堆）

在路线中添加

BetsLive

，

betsend

和

betsend

：

函数应用程序（）{
返回(
{/*使用NavLink链接到特定路由。*/}
);
}

---

此外，您还可以使用交换机和路由来嵌套路由，请检入示例。

在路由中添加

BetsLive

、

betsend

和

betsend

：

函数应用程序（）{
返回(
{/*使用NavLink链接到特定路由。*/}
);
}

---

您还可以使用交换机和路由来嵌套路由，请检入示例。

您需要在

正如我正确理解的，您需要实现一个简单的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>
    </>
   );
}

---

关键时刻是您应该在

的

组件
属性中传递组件，您希望在相应的路径中看到该组件。
您需要在

正如我正确理解的，您需要实现一个简单的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>
    </>
   );
}


关键时刻是您应该在
的
组件
道具中传递组件，您希望在相应的路径中看到该组件。
我将使用route参数（类似于您提到的道具）：

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route}；
从“./components/Bets/Bets”导入赌注；
函数App（）{
返回(
);
}
导出默认应用程序；

从“React”导入React；
从“react router dom”导入{NavLink，useParams}；
从“./bets_live”导入现场投注；
从“./bets_end”导入已结束的赌注；
从“./bets_uncoming”导入即将到来的赌注；
常量下注=（道具）=>{
const{whatbets}=useParams（）
返回(
升级
居住
结果
{whatbets==='live'&&}
{whatbets==='end'&&}
{！whatbets&&}
);
}
出口违约押注；
我会选择路线参数（有点像你提到的道具）：

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route}；
从“./components/Bets/Bets”导入赌注；
函数App（）{
返回(
);
}
导出默认应用程序；

从“React”导入React；
从“react router dom”导入{NavLink，useParams}；
从“./bets_live”导入现场投注；
从“./bets_end”导入已结束的赌注；
从“./bets_uncoming”导入即将到来的赌注；
常量下注=（道具）=>{
const{whatbets}=useParams（）
返回(
升级
居住
结果
{whatbets==='live'&&}
{whatbets==='end'&&}
{！whatbets&&}
);
}
出口违约押注；