Setup routing within App.js
This commit modifies App.js to use routing, such that it's possible to navigate between a home screen, and the Artifact Editor. Test plan: Run `yarn start`, and navigate between the home screen and artifact editor. Verify that the artifact editor still works as expected.
This commit is contained in:
parent
0149d74971
commit
372f8f9bd6
|
@ -1,10 +1,38 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import {BrowserRouter as Router, Route, NavLink} from "react-router-dom";
|
||||||
|
|
||||||
import ArtifactEditor from "../plugins/artifact/editor/App";
|
import ArtifactEditor from "../plugins/artifact/editor/App";
|
||||||
|
|
||||||
export default class App extends React.Component<{}> {
|
export default class App extends React.Component<{}> {
|
||||||
render() {
|
render() {
|
||||||
return <ArtifactEditor />;
|
const ARTIFACT_EDITOR_ROUTE = "/plugins/artifact/editor";
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<div>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<NavLink to="/">Home</NavLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NavLink to={ARTIFACT_EDITOR_ROUTE}>Artifact Editor</NavLink>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<Route exact path="/" component={Home} />
|
||||||
|
<Route path={ARTIFACT_EDITOR_ROUTE} component={ArtifactEditor} />
|
||||||
|
</div>
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const Home = () => (
|
||||||
|
<div>
|
||||||
|
<h1>Welcome to SourceCred! Please enjoy your stay.</h1>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
Loading…
Reference in New Issue