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

【问题标题】：The React.js route in the component must call other components depending on the URL组件中的 React.js 路由必须根据 URL 调用其他组件
【发布时间】：2020-08-09 10:24:03
【问题描述】：

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

如何解决这个问题？有个思路是通过props（在Route中传递某种参数），通过验证做return（堆代码 堆代码)

【问题讨论】：

标签： javascript node.js reactjs react-router react-router-dom

【解决方案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>
  );
}

您也可以使用 Switch 和 Route 来嵌套路由，请查看 documentation 中的示例。

【讨论】：

【解决方案2】：

你需要多看React Router documentation

据我了解，您需要实现一个简单的 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;

关键时刻你应该在<Route />的component prop中传递component，你想在相应的路径中看到哪个。

【讨论】：

【解决方案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;

【讨论】：