6

I have a react app for which I want to add a sitemap.xml. I have added this route to link to the file (XML is my my sitemap.xml):

import XML from './sitemap.xml';    
<Route component={XML} path={'/sitemap.xml'} />

I keep getting this error, which I understand it means that I need to add an xml loader to my webpack:

You may need an appropriate loader to handle this file type.

Not sure how to pick an xml loader as I could mostly find parsers (xml to json) and I am not sure if it's ok to have the sitemap in json. Also, is there any other native way of displaying the xml file without adding any loader?

John Conde
  • 217,595
  • 99
  • 455
  • 496
aiiwa
  • 591
  • 7
  • 27

3 Answers3

7

If you are using create-react-app, just put your XML file in public folder (a folder beside node_modules and src folders), then access it through {base_url}/{XML_file_name.xml} (e.g. localhost:3000/sitemap.xml)

sdabrutas
  • 1,477
  • 2
  • 14
  • 28
  • I think this is the correct answer. Plain and simple! – GalAbra Sep 24 '18 at 07:21
  • 3
    on localhost, my sitemap.xml is accessible through http://localhost:3000/sitemap,XML but when I deploy this app onto AWS amplify, it is not accessible through {baseURL}/{sitemap.xml} any suggestion? – umer Aug 04 '20 at 19:02
  • for amplify, you would need to add a redirect rule, https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html – Jasbindar Singh Apr 13 '21 at 07:00
1

In , keyword component should be a React Component.

Check the documentation：Route - React Router

If you want to pass XML as a variable, you should change XML format to string and with another prop but component={}.To transform XML to String, ry escape(XML) before passing to Route! Check escape(str)

with import keyword, youcan try like this:

// file: get-xml.js
let transformXMLToString = () => {

  // read the target XML fiel and transform it to String
  
  // return the string
  return XMLasString;
};

export transformXMLToString;

// then you could import the XML like this in another file:

import transformXMLToString from 'get-xml.js';

// then pass it to <Route> like:

<Route component={transformXMLToString()}/>
Robin Chen
  • 131
  • 1
  • 8
  • sorry, i am not sure how this is exactly done. I have updated the route with the way I am importing the xml, in case you can help with that line, or maybe any link that would help with this? – aiiwa Feb 22 '17 at 03:42
  • That I mean is to trying transform XML to string type and passing to Route as a string, then transform the string back to XML type! @aiiwa – Robin Chen Feb 22 '17 at 03:49
  • well, tried escape as suggested (although its documented as deprecated), but it didnt work. – aiiwa Feb 22 '17 at 03:52
  • and why you passing XML to Route as `component={XML}` ? – Robin Chen Feb 22 '17 at 03:59
  • in ``, keyword `component` should be a React Component. – Robin Chen Feb 22 '17 at 04:02
  • thanks. tried that. still give me error: Module parse failed: xxx\sitemap.xml Unexpected token (1:0) You may need an appropriate loader to handle this file type. – aiiwa Feb 22 '17 at 04:18
0

A simple solution would be to add <a href="XML_PATH" style={{display:"none"}}>xml</a> Then check your google chrome development console, search for the anchor(a) tag. And follow the path

sumukha hegde
  • 85
  • 2