Question

我开始学习反应，并尝试在我的旧项目中实施它。问题如下。

具有带有行的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;

“ //此处” 应为特定的组成部分，具体取决于URL。下面的例子

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

如何解决这个问题？有一种方法可以通过props（在Route中传递某种参数）来完成，并通过验证（代码堆 代码堆< / em>）

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>
  );
}

您还可以使用“切换和路由”嵌套路由，请查看documentation中的示例。

Answer 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;

关键时刻是您应该在component的{{1}}道具中传递 component ，您要在相应路径中看到的

Answer 3

我会使用route参数（如您提到的道具种类）：

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;

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

3 个答案: