John Doe John Doe - 1 year ago 175
Markdown Question

React render *.md via custom component

Its easy to render markdown data via

module. But I cant implement render all
files via custom

<Route path="*.md" component={MarkdownPage} />

but route didn't work and
-files open in browser as-is.

I'm expecting that this file will be provided as a data to component via
, to do something like:

render() {
return (
<h1>Pretty markdown</h1>
<ReactMarkdown source={this.props} />

How could I achieve this?

Answer Source

One approach would be to use a GET request to either a .md file or a JSON that includes the markdown as a string. Here's an example of that:

class ReactMarkdown extends React.Component {
  constructor() {
    this.state = { html: '' };

  componentDidMount() {
      .then(response => response.text())
      .then(markdown => this.setState({ html: marked(markdown) }));

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.html }}></div>

ReactDOM.render(<ReactMarkdown md=""/>, document.getElementById('View'));
<script src=""></script>
<script src=""></script>
<script src=""></script>
<div id="View"></div>

With React Router:

<Route path="/markdown/:file" component={MarkdownPage} />
// Example route: localhost:3000/markdown/

Then inside your component:

fetch('/' + this.props.params.file)
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download