리액트 라우터에서 링크 컴포넌트를 추가하는 Material-ui

리액트 라우터에서 링크 컴포넌트를 추가하는 Material-ui

추가하는데 어려움을 겪고 있습니다.<Link/> AppBarmaterialui의

다음은 내 내비게이션 클래스입니다.

class Navigation extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    var styles = {
      appBar: {
        flexWrap: 'wrap'
      },
      tabs: {
        width: '100%'
      }
    }

    return (
      <AppBar showMenuIconButton={false} style={styles.appBar}>
        <Tabs style={styles.tabs}>
          <Tab label='Most popular ideas'/>
          <Tab label='Latest ideas' />
          <Tab label='My ideas' />
        </Tabs>
      </AppBar>
    )
  }
}

어느 쪽이 좋을까:

탭은 클릭할 수 있고, 애니메이션은 유동적으로 되어 있습니다.멋집니다.하지만 어떻게 연결하면react-router 그것은 '그것'의 '그것의 '그것'이다.<Link/> 컴포넌트?

추가하려고 했습니다.onChange「이것들」은 다음과 같습니다.

<Tab
  label='My ideas'
  onChange={<Link to='/myPath'></Link>}
/>

다만, 다음의 에러가 표시됩니다.

Uncaught Invariant Violation: Expected onChange listener to be a function, instead got type object

<Tab/>의 합치다<Link/>.<Tabs/>는 ""만 .<Tab/>★★★★★★ 。

이것도 동작하지 않습니다(오류는 발생하지 않지만 Tab을 클릭해도 경로로 이동하지 않습니다.

<Tab label='Most popular ideas'>
  <Link to='/popular'/>
</Tab>

만드방방은 하면 만들 수 요?<Link/> 동작합니다.<Tabs> ★★★★★★★★★★★★★★★★★」<AppBar>안 , 는 그 에 어떤 이라도 쓸 수material-ui적절한 메뉴를 형성하기 위한 라이브러리입니다.

타입 스크립트가 있는 머티리얼 UI 1.0의 경우:아래의 @ogglas의 투고를 참조해 주세요.

일반 JS를 사용하는 재료 UI 1.0의 경우:

<Tabs value={value} onChange={this.handleChange}>
  {
    this.props.tabs.map(
      ({label, path})=><Tab key={label} 
                            label={label} 
                            className={classes.tabLink} 
                            component={Link} 
                            to={path} />
    )
  }
</Tabs>

★★★★★★★★★★★★★★★★★.classes.tabLink는 다음과 같습니다

tabLink : {
    display:"flex",
    alignItems:"center",
    justifyContent:"center"
}

이게 어떻게 작동하나요?

mui 1.0에서 .0 ButtonBase을합니다.component"Button Base" 참조.이 개념은 컴포넌트가 래퍼/루트 요소로 렌더링하는 내용을 제어할 수 있도록 하는 것입니다. Tab또한 이 기능을 가지고 있지만, 이 답변을 쓸 때 이 소품은 명시적으로 문서화되어 있지 않지만,Tab 계승하다ButtonBase그에는 이 내용이 , ,든소소문((((((((((((((( , , , , , , , , , , 。

의 또 다른 기능ButtonBase소품들은 모두 입니다.ButtonBase컴포넌트가 된 컴포넌트에 .component'아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아.toprop prop by by가 Link그것을 주어Tab같은 방법으로 추가 소품을 보낼 수 있습니다.은, 「」, 「」의 양쪽 모두에 명시적으로 되어 있는 해 주세요.ButtonBase ★★★★★★★★★★★★★★★★★」Tab.

@josh-l님, 추가해 주셔서 감사합니다.

지금 바로 할 수 있는 방법은 다음과 같습니다.

<Tabs onChange={this.changeTab} value={value}>
   <Tab value={0} label="first" containerElement={<Link to="/first"/>} />
   <Tab value={1} label="second" containerElement={<Link to="/second"/>}/>
   <Tab value={2} label="third" containerElement={<Link to="/third"/>} />
 </Tabs>

이 간단한 방법을 시도해 볼 수 있습니다.

 <Tab label='Most popular ideas'  to='/myPath' component={Link} />

는 이 the를 합니다.<Link /> 사용하지 <Link /> ★★★★★★★★★★★★★★★★★」<NavLink />반응 반응 반응으로부터.같은 예에 대해서는, 여기의 메뉴얼을 참조해 주세요.

https://material-ui.com/components/links/

한 also도.<Button />에는 이 을 달성하기 가 있습니다.

<Button color="inherit" component={Link} to={"/logout"}>Logout</Button>

이에 대한 광범위한 논의는 여기에서 찾을 수 있습니다.

https://github.com/mui-org/material-ui/issues/850

TypeScript @hazardous @typeScript 。했습니다.material-ui v1.0.0-beta.16그리고.react-router 4.2.0우리가 갈라서는 이유는this.props.history.location.pathname그 이유는 우리가 다른 사람들에게/renewals/123예를들면.이렇게 하지 않으면 다음 경고가 표시되고 활성 탭이 표시되지 않습니다.Warning: Material-UI: the value provided '/renewals/123' is invalid

Import를 포함한 완전한 코드:

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as ReactRouter from "react-router";
import * as PropTypes from "prop-types";
import { Switch, Route, Redirect, Link  } from "react-router-dom";
import { Cases } from './../Cases';
import { SidePane } from './../SidePane';
import { withStyles, WithStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Tabs, { Tab } from 'material-ui/Tabs';
import { withRouter } from "react-router-dom";
import Badge from 'material-ui/Badge';
import Grid from 'material-ui/Grid';
import { Theme } from 'material-ui/styles';
import SimpleLineIcons from '../../Shared/SimpleLineIcons'

interface IState {
    userName: string;
}

interface IProps {
    history?: any
}

const styles = (theme: Theme) => ({
    root: theme.typography.display1,
    badge: {
        right: '-28px',
        color: theme.palette.common.white,
    },
    imageStyle:{
        float: 'left',
        height: '40px',
        paddingTop: '10px'
    },
    myAccount: {
        float: 'right'
    },
    topMenuAccount: {
        marginLeft: '0.5em',
        cursor: 'pointer'
    }
});

type WithStyleProps = 'root' | 'badge' | 'imageStyle' | 'myAccount' | 'topMenuAccount';

class Menu extends React.Component<IProps & WithStyles<WithStyleProps>, IState> {
    constructor(props: IProps & WithStyles<WithStyleProps>) {
        super(props);
        this.state = {
            userName: localStorage.userName ? 'userName ' + localStorage.userName : ""
        }
    }
    componentDidMount() {
        this.setState({ userName: localStorage.userName ? localStorage.userName : "" })
    }
    logout(event: any) {
        localStorage.removeItem('token');
        window.location.href = "/"
    }

    handleChange = (event: any, value: any) => {
        this.props.history.push(value);
    };

    render() {
        const classes = this.props.classes;
        let route = '/' + this.props.history.location.pathname.split('/')[1];
        return (
            <div>
                <Grid container spacing={24}>
                    <Grid item xs={12} className={classes.root}>
                        <img src="/Features/Client/Menu/logo.png" alt="Logo" className={classes.imageStyle} />
                        <div className={this.props.classes.myAccount}>
                        <span><span className={this.props.classes.topMenuAccount}>MY ACCOUNT</span><span className={classes.topMenuAccount}><SimpleLineIcons iconName={'user'} />&#x25BE;</span></span>
                            <span onClick={this.logout} className={classes.topMenuAccount}><SimpleLineIcons iconName={'logout'} /></span>
                        </div>
                    </Grid>
                    <Grid item xs={12} >
                        <div className="route-list">
                            <Tabs
                                value={route}
                                onChange={this.handleChange}
                                indicatorColor="primary"
                                textColor="primary"
                            >
                                <Tab label="Overview" value="/" />
                                <Tab label={<Badge classes={{ badge: classes.badge }} badgeContent={this.props.caseRenewalCount} color="primary">
                                    Renewals
                                   </Badge>} value="/renewals" />
                            </Tabs>
                        </div>
                    </Grid>
                </Grid>
            </div>
        );
    }
}
export default withStyles(styles)(withRouter(Menu))

라우터 구동 탭의 TypeScript 구현.

TypeScript 구현을 원하는 사용자에게 적합합니다.구성이 용이함.주동자tabs배열.

interface ITabsPageProps {
  match: match<{page: string}>;
  history: History;
}

const tabs = [{
  label: 'Fist Tab',
  link: 'fist-tab',
  component: <FirstTabContent/>
}, {
  label: 'Second Tab',
  link: 'second-tab',
  component: <SecondTabContent/>
}, {
  label: 'Third Tab',
  link: 'third-tab',
  component: <ThirdTabContent/>
}];

export class TabsPage extends React.Component<ITabsPageProps> {
  handleChange(tabLink: string) {
    this.props.history.push(`/tabs-page/${tabLink}`);
  }

  render() {
    const currentTab = this.props.match.params.page;
    const selectedTab = tabs.find(tab => currentTab === tab.link);

    return (
      <Fragment>
        <Tabs
          value={currentTab}
          onChange={(event, value) => this.handleChange(value)}
        >
          {tabs.map(tab => (
            <Tab
              key={tab.link}
              value={tab.link}
              label={tab.label}
            />
          ))}
        </Tabs>

        {selectedTab && selectedTab.component}
      </Fragment>
    );
  }
}

다음은 후크 포함 리액트, 탭 포함 재료 UI, 링크 포함 리액트 라우터 및 TypeScript의 다른 구현입니다.

import * as React from "react";
import { BrowserRouter as Router, Route, Redirect, Switch, Link, LinkProps } from 'react-router-dom';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import { default as Tab, TabProps } from '@material-ui/core/Tab';

import Home from './Home';
import ProductManagement from './ProductManagement';
import Development from './Development';
import HomeIcon from '@material-ui/icons/Home';
import CodeIcon from '@material-ui/icons/Code';
import TimelineIcon from '@material-ui/icons/Timeline';

const LinkTab: React.ComponentType<TabProps & LinkProps> = Tab as React.ComponentType<TabProps & LinkProps>;

function NavBar() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
    setValue(newValue);
  };
  return (
    <div >
      <AppBar position="static" >
        <Tabs value={value} onChange={handleChange} centered>
          <LinkTab label='Home' icon={ <HomeIcon />} component={Link} to="/" />
          <LinkTab label='Development' icon={<CodeIcon />} component={Link} to="/dev" />
          <LinkTab label='Product Management' icon={<TimelineIcon />} component={Link} to="/pm" />
        </Tabs>
      </AppBar>
    </div>
  )
};

export default function App() {
  return (
    <Router>
      <div>
        <NavBar />
        <Switch>
          <Route exact path="/" component={ Home } />
          <Route exact path="/dev" component={ Development } />
          <Route exact path="/pm" component={ ProductManagement } />
          <Redirect from="/" to="/" />
        </Switch>
      </div>
    </Router>
  )
}

이 솔루션의 회피책은 매우 신뢰성이 높았습니다만, 고객이 기대하는 것보다 수작업에 의한 솔루션이 될 가능성이 있습니다.

링크 컴포넌트를 사용하지 않는 것이 지금까지의 전략입니다.대신 Tab onChange 속성을 Tab 클릭에 응답할 수 있는 콜백으로 활용하고 상위 프로그램의 Propos를 사용하여 위치를 수동으로 추적합니다.

리액트 라우터에서 History라는 유틸리티를 Import하여 위치를 수동으로 푸시할 수 있습니다.React-Router를 사용하는 동안 구성 요소 트리는 현재 위치의 문자열이 포함된 경로 이름 키가 있는 위치 소품에 액세스할 수 있습니다.

현재 URL을 구성하는 컴포넌트로 이 문자열을 수동으로 해석한 후 Switch 문을 사용하여 현재 선택되어 있는 탭과 탭을 클릭했을 때 링크할 위치를 결정합니다.(이를 통해 내비게이션에 대한 상당한 제어가 가능합니다.)

(예: [ ] , [ ] )

다음은 이 솔루션을 통합한 후의 컴포넌트 외관입니다.

import React from 'react';
import {History} from 'react-router';

function parseLocation(location) {
    if (String(location)) {
        var locationArray = location.split('/');
        return locationArray;
    } else {
        return false;
    }
};
function filterPath(path) {
    let locationArray = parseLocation(path);
    return locationArray[locationArray.length - 1];
};
var Navigation = React.createClass({
      mixins: [History],
      getPage() {
        if (this.props.location.pathname) {
          let pathname = this.props.location.pathname;
          let pageName = filterPath(pathname);
          return pageName;
        } else {
          return false;
        } 
      },
      decideContent() {
        let page = this.getPage();
        let content;
        switch(page) {
           case 'popular':
              content = 0;
           case 'latest':
              content = 1;
           case 'myideas':
              content = 2;
           default:
              content = 0;
        }
        return content;
      },
      handleTabChange(value) {
        let location = false;
        switch (value) {
           case 0:
             location = 'popular';
             break;
           case 1:
             location = 'latest';
             break;
           case 2:
             location = 'myideas';
             break;
        }
        if (location && location !== this.getPage()) {
          this.history.pushState(null, '/'+location);
        }
      },
      render() {
         var styles = {
          appBar: {
           flexWrap: 'wrap'
          },
          tabs: {
           width: '100%'
          }
         };
         let content = this.decideContent();
         let tabs = <Tabs
                  onChange={this.handleTabChange}
                  value={content}
                >
                  <Tab label="Most Popular Ideas" value={0}  />
                  <Tab label="Latest Ideas" value={1}  />
                  <Tab label="My Ideas" value={2}  />
                </Tabs>;
        return (
         <AppBar showMenuIconButton={false} style={styles.appBar}>
           {tabs}
         </AppBar>
        );
      }
});

이 링크를 체크해 주세요.솔루션을 실장해, 작업했습니다.

머티리얼 UI에서의 구성

NextJs를 사용하는 경우 이렇게 하고 자체 구성 요소를 만들 수 있습니다.

* 탭이 자동으로 추가되기 때문에 탭을 'a' 태그로 감싸지 않았습니다.

const WrapTab = (props) => {
const { href } = props
return (
<Link href={href} style={{ width: "100%" }}>
  <Tab {...props} />
</Link>
)}

그리고 이게 네 귀환이야

    <Tabs
      value={value}
      indicatorColor="primary"
      textColor="primary"
      onChange={handleChange}
      variant="fullWidth"
    >
        <WrapTab href="/testPage/?tab=0" icon={<MenuIcon />} />
        <WrapTab href="/testPage/?tab=1" icon={<StampIcon2 />} />
        <WrapTab href="/testPage/?tab=2" icon={<ShopIcon />} />
        <WrapTab href="/testPage/?tab=3" icon={<PenIcon />} />
        <WrapTab href="/testPage/?tab=4" icon={<ProfileIcon />} />
    </Tabs>

material-ui documents 링크

이건 나한테 효과가 있는 것 같아

import { Link as RouterLink } from 'react-router-dom';
import Link from '@mui/material/Link';

<Link to={menuItem.url} component={RouterLink} aria-current="page">
{menuItem.label}
</Link>

재료-ui 링크를 Next.js 링크와 함께 정리하고 싶은 사용자용

import Link from "next/link"
import MuiLink from "@material-ui/core/Link"

const CustomNextLink = ({href, alt}) => ({children, ...rest}) => (
<Link href={href} alt={alt}>
  <MuiLink {...rest}>
    {children}
  </MuiLink>
</Link>)

그런 다음 Tab 구성 요소를 전달합니다.

<Tab 
 key={...}
 label={title} 
 icon={icon} 
 component={CustomNextLink({href: to, alt: title})}
 style={...}
 className={...}
 classes={{selected: ...}}
 {...a11yProps(index)}
/>

를 사용합니다.href=""옵션을 선택합니다.

<Tab
 href="/en/getting-started"
 label="Contact US"
 style={{ color: "white", textDecoration: "none" }}
/>

클릭 시 파급 효과를 제거하려면 옵션을 사용합니다.disableRipple

언급URL : https://stackoverflow.com/questions/37843495/material-ui-adding-link-component-from-react-router