reactjs - 如何使用带有 react-router 的选项卡重定向到另一条路由？

Question

我有这个组件：index.js

const Routes = () => (
        <Switch>
          <Tab panes={[
            {
               menuItem: {
                  as NavLink,
                  content : 'un',
                  key: "un",
                  to: "${match.url}/un"
               },
             render: () => <Route path="${match.url}/un" component={un} />
           }, 
            {
               menuItem: {
                  as NavLink,
                  content : 'deux',
                  key: "deux",
                  to: "${match.url}/deux"
               },
             render: () => <Route path="${match.url}/deux" component={deux} />
           }]}
         />
        </Switch>
    );

我想以编程方式"deux"从组件中调用组件"un"，如下所示：

<Button onClick={() => history.push("/deux") } />

它不是这样工作的，url 改变了但组件没有加载。

它使用Tab从semantic-ui-react

标签： reactjsreact-routersemantic-ui

Answer 1

import React, { useEffect, useState } from "react";
import { Route, RouteComponentProps, Switch } from "react-router";
import { Link, NavLink } from "react-router-dom";
import { Label, List, Tab } from "semantic-ui-react";

interface DetailParams {
  id: string;
}

export const TabExample: React.FC<RouteComponentProps<DetailParams>> = ({
  match,
  history,
}) => {
    const [counter, setCounter] = useState(60); 
    useEffect(() => {
       setTimeout(() => setCounter(counter - 1), 1000);
     });


     const Profile = () => <div>{counter}</div>;
     const Comments = () => <div>You're on the Comments Tab</div>;
     const Contact = () => <div>You're on the Contact Tab</div>;
     

  const [tabs, setTab] = useState([
   
    {
      menuItem: {
        as: NavLink,
        id: "tab1",
        content: "tab1",
        to: `${match.path}/tab1`,
        exact: true,
        key: "tab1",
      },
      pane: (
        <Route
          path={`${match.path}/tab1`}
          exact
          render={() => (
            <Tab.Pane>
             <Profile/>
            </Tab.Pane>
          )}
        />
      )
    },
    {
      menuItem: {
        as: NavLink,
        id: "tab2",
        content: "tab2",
        to: `${match.path}/tab2`,
        exact: true,
        key: "tab2",
      },
      pane: (
        <Route
          path={`${match.path}/tab2`}
          exact
          render={() => (
            <Tab.Pane>
             <Contact/>
            </Tab.Pane>
          )}
        />
      )
    },
    {
      menuItem: {
        as: NavLink,
        id: "tab3",
        content: "tab3",
        to: `${match.path}/tab3`,
        exact: true,
        key: "tab3",
      },
      pane: ( 
        <Route
          path={`${match.path}/tab3`}
          exact
          render={() => (
            <Tab.Pane>
             <Comments/>
            </Tab.Pane>
          )}
        /> 
        
      )
    },
  ]);

  const ekle = () => {
    debugger;
    setTab((names) => [
      ...tabs,
      {
        menuItem: {
          as: NavLink,
          id: "tab33",
          content: "Config Lists",
          to: `${match.path}/tab33`,
          exact: true,
          key: "configs",
        },
        pane: (
            <Route
            
              path={`${match.path}/tab33`}
              exact
              render={() => (
                <Tab.Pane>
                 <Comments/>
                </Tab.Pane>
              )}
            />
          )
      },
    ]);
  };

  return (
    <div>
    <Switch>
      <Tab panes={tabs} activeIndex={-1} renderActiveOnly={false} />
       </Switch>
      <button onClick={() => ekle()}>Ekle</button>
    </div>
  );
};