To use Link, you must define your routes.
you can create your routes here.
Example:<Route path="/user/:id" component={LoginForm} />
I created a file App.js to define the routes
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// app.js
import React, { Component } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Demo from './demo';
const LoginForm = () => <></>;
const SearchComponent = () => <></>;
class App extends Component {
render() {
return (
<React.Fragment>
<BrowserRouter>
<div>
<Route path="/search" component={SearchComponent} />
<Route path="/loginform" component={LoginForm} />
<Route path="/" component={Demo}/>
</div>
</BrowserRouter>
</React.Fragment>
);
}
}
export default App;
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
could pass button link attributes as an object
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// demo.js
const tableBodies = [
`order.owner.user.first_name`,
`order.owner.user.last_name`,
{
base: '/user',
icon: <VisibilityIcon />
}
]
<!-- end snippet -->
I defined a function return a custom ButtonLink() button link can you pass the props after call it
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button';
import VisibilityIcon from '@material-ui/icons/Visibility';
const useStyles = makeStyles({
root: {
width: "100%"
},
container: {
maxHeight: 440
}
});
export default function StickyHeadTable({ data, tableHeaders, tableBodies }) {
const classes = useStyles();
const getProperty = (obj, prop) => {
var parts = prop.split('.');
if (Array.isArray(parts)) {
var last = parts.pop(),
l = parts.length,
i = 1,
current = parts[0];
while((obj = obj[current]) && i < l) {
current = parts[i];
i++;
}
if(obj) {
return obj[last];
}
} else {
throw 'parts is not valid array';
}
}
const ButtonLink = (prop) => {
return (
<Button
component={Link}
to={prop.link}
variant="contained"
type="button"
size="small"
className={"button-classes"}
startIcon={prop.icon}
/>
)
}
//<ButtonLink link="/mani"/>
return (
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{tableHeaders.map((header, index) => (
<TableCell key={index}>{header}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{data.map(data => (
<TableRow key={data.id}>
{tableBodies.map(body => (
(typeof body === "string"
? <TableCell key={body}>{getProperty(data, body)}</TableCell>
: <TableCell key={body}><ButtonLink
link={body.base}
icon={body.icon}
/></TableCell>
)
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Paper>
);
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './demo';
import App from './app';
//ReactDOM.render(<Demo />, document.querySelector('#root'));
ReactDOM.render(<App />, document.querySelector('#root'));
<!-- end snippet -->
That's [*property spread notation*][1]. It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for a long time via transpilation (as "[JSX spread attributes][2]" even though you could do it elsewhere, too, not just attributes).
`{...this.props}` *spreads out* the "own" enumerable properties in `props` as discrete properties on the `Modal` element you're creating. For instance, if `this.props` contained `a: 1` and `b: 2`, then
<Modal {...this.props} title='Modal heading' animation={false}>
would be the same as
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
But it's dynamic, so whatever "own" properties are in `props` are included.
Since `children` is an "own" property in `props`, spread will include it. So if the component where this appears had child elements, they'll be passed on to `Modal`. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a `children` property in the opening tag. Example:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
class Example extends React.Component {
render() {
const { className, children } = this.props;
return (
<div className={className}>
{children}
</div>
);
}
}
ReactDOM.render(
[
<Example className="first">
<span>Child in first</span>
</Example>,
<Example className="second" children={<span>Child in second</span>} />
],
document.getElementById("root")
);
<!-- language: lang-css -->
.first {
color: green;
}
.second {
color: blue;
}
<!-- language: lang-html -->
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
That replaces `this.state.foo` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const obj = {
foo: {
a: 1,
b: 2,
c: 3
}
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
<!-- language: lang-css -->
.as-console-wrapper {
max-height: 100% !important;
}
<!-- end snippet -->
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
[2]: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes
