New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Generate sitemaps from react-router #1843

Closed
ieow opened this Issue Sep 8, 2015 · 6 comments

Comments

Projects
None yet
5 participants
@ieow

ieow commented Sep 8, 2015

Hi,

I use react-router for SPA site but to have better SEO or google search, sitemaps seems like required.
Is library to generate sitemaps from react-router ? Or is there any other way for google crawler to notice react-router?

Thanks.

@knowbody

This comment has been minimized.

Show comment
Hide comment
@knowbody

knowbody Sep 8, 2015

Contributor

I'm not sure if something like it already exists, but might be useful to have such a tool. I just quickly hacked something together which gives the results you want. The code is not tested and probably there is a much better way of doing it.

render() {
  JSON.flatten = function(data) {
    var result = {};
    function recurse (cur, prop) {
      if (Object(cur) !== cur) {
        result[prop] = cur;
      } else if (Array.isArray(cur)) {
        for(var i=0, l=cur.length; i<l; i++)
          recurse(cur[i], prop + '[' + i + ']');
        if (l == 0)
          result[prop] = [];
      } else {
        var isEmpty = true;
        for (var p in cur) {
          isEmpty = false;
          recurse(cur[p], prop ? prop+'.'+p : p);
        }
        if (isEmpty && prop)
          result[prop] = {};
      }
    }
    recurse(data, '');
    return result;
  }

  let flattenObj = JSON.flatten(this.props.route.childRoutes);

  Object.keys(flattenObj).map(key => {
    if (key.indexOf('path') !== -1) {
      console.log(flattenObj[key]); // path to each route
    }
  });
}

JSON.flatten just flattens down all the childRoutes, and then just logging all the paths.

If you place the above code in the render method of your App component it should give you some kind of a sitemap. In my example gives something like:

about
inbox
messages/:id
/about-us

and these are my routes:

<Router>
  <Route path='/' component={App}>
    <Route path='about' component={About} />
    <Route path='inbox' component={Inbox}>
      <Route path='messages/:id' component={Message} />
    </Route>
    <Redirect from="/about-us" to="/about" />
  </Route>
</Router>
Contributor

knowbody commented Sep 8, 2015

I'm not sure if something like it already exists, but might be useful to have such a tool. I just quickly hacked something together which gives the results you want. The code is not tested and probably there is a much better way of doing it.

render() {
  JSON.flatten = function(data) {
    var result = {};
    function recurse (cur, prop) {
      if (Object(cur) !== cur) {
        result[prop] = cur;
      } else if (Array.isArray(cur)) {
        for(var i=0, l=cur.length; i<l; i++)
          recurse(cur[i], prop + '[' + i + ']');
        if (l == 0)
          result[prop] = [];
      } else {
        var isEmpty = true;
        for (var p in cur) {
          isEmpty = false;
          recurse(cur[p], prop ? prop+'.'+p : p);
        }
        if (isEmpty && prop)
          result[prop] = {};
      }
    }
    recurse(data, '');
    return result;
  }

  let flattenObj = JSON.flatten(this.props.route.childRoutes);

  Object.keys(flattenObj).map(key => {
    if (key.indexOf('path') !== -1) {
      console.log(flattenObj[key]); // path to each route
    }
  });
}

JSON.flatten just flattens down all the childRoutes, and then just logging all the paths.

If you place the above code in the render method of your App component it should give you some kind of a sitemap. In my example gives something like:

about
inbox
messages/:id
/about-us

and these are my routes:

<Router>
  <Route path='/' component={App}>
    <Route path='about' component={About} />
    <Route path='inbox' component={Inbox}>
      <Route path='messages/:id' component={Message} />
    </Route>
    <Redirect from="/about-us" to="/about" />
  </Route>
</Router>
@ryanflorence

This comment has been minimized.

Show comment
Hide comment
@ryanflorence

ryanflorence Sep 8, 2015

Contributor

the route config is yours, you can iterate over it yourself.

Contributor

ryanflorence commented Sep 8, 2015

the route config is yours, you can iterate over it yourself.

@ieow

This comment has been minimized.

Show comment
Hide comment
@ieow

ieow Sep 9, 2015

@knowbody - thanks for the hack.
@ryanflorence - I am wondering if there is any library could generate based on the react-router so that it will sitemap will always in sync with react-router (in case forgot to update either one) .

ieow commented Sep 9, 2015

@knowbody - thanks for the hack.
@ryanflorence - I am wondering if there is any library could generate based on the react-router so that it will sitemap will always in sync with react-router (in case forgot to update either one) .

@benbonnet

This comment has been minimized.

Show comment
Hide comment
@benbonnet

benbonnet Oct 14, 2015

don't you need to know about the content to build a sitemap ?
feels serverside

don't you need to know about the content to build a sitemap ?
feels serverside

@DanielHeath

This comment has been minimized.

Show comment
Hide comment
@DanielHeath

DanielHeath Jan 7, 2016

@bbnnt react-router works well server-side

@bbnnt react-router works well server-side

@benbonnet

This comment has been minimized.

Show comment
Hide comment
@benbonnet

benbonnet Jan 10, 2016

@DanielHeath i should have said; "database-side". correct me if i'm wrong; react not about that, neither react-router. About the question/answers above, not sure if generating a router skeleton is of any use when you start reaching hundreds of urls

@DanielHeath i should have said; "database-side". correct me if i'm wrong; react not about that, neither react-router. About the question/answers above, not sure if generating a router skeleton is of any use when you start reaching hundreds of urls

@ReactTraining ReactTraining deleted a comment from carkod Feb 9, 2018

@lock lock bot locked as resolved and limited conversation to collaborators Jun 5, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.