You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
842 B
42 lines
842 B
7 years ago
|
import React from "react";
|
||
|
import { Route, Link } from "react-router-dom";
|
||
|
import { Container } from "semantic-ui-react";
|
||
|
|
||
|
const Topics = ({ match }) => (
|
||
|
<Container>
|
||
|
<h2>Topics</h2>
|
||
|
<ul>
|
||
|
<li>
|
||
|
<Link to={`${match.url}/rendering`}>
|
||
|
Rendering with React
|
||
|
</Link>
|
||
|
</li>
|
||
|
<li>
|
||
|
<Link to={`${match.url}/components`}>
|
||
|
Components
|
||
|
</Link>
|
||
|
</li>
|
||
|
<li>
|
||
|
<Link to={`${match.url}/props-v-state`}>
|
||
|
Props v. State
|
||
|
</Link>
|
||
|
</li>
|
||
|
</ul>
|
||
|
|
||
|
<Route path={`${match.url}/:topicId`} component={Topic} />
|
||
|
<Route
|
||
|
exact
|
||
|
path={match.url}
|
||
|
render={() => <h3>Please select a topic.</h3>}
|
||
|
/>
|
||
|
</Container>
|
||
|
);
|
||
|
|
||
|
const Topic = ({ match }) => (
|
||
|
<div>
|
||
|
<h3>{match.params.topicId}</h3>
|
||
|
</div>
|
||
|
);
|
||
|
|
||
|
export default Topics;
|