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?
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)
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()}/>
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
Related
I have a sample JSON response from an API that is about 52,000 lines. I've saved it as TestJSONFile.json in my NextJS project.
This isn't permanent, but just a temporary measure so I can have access to a sample API response without needing to connect/implement the actual API calls at the moment.
The project is working fine and there are no crashes, but there is this warning message:
./src/components/CurrentComponent.js
Should not import the named export 'something' (imported as 'TestJSONFile') from default-exporting module (only default export is available soon)
printWarnings # hot-dev-client.js?a8a2:88
What can I do to get rid of this warning, just to make sure there are no issues later? I'm not entirely familiar with React so I'm not sure what the best way to handle this would be.
I don't need to call JSON.parse(), since once I manually added the sample response into my project (copy/paste the entire response), the data is already interpreted as a Javascript object and not a JSON string. I tried changing the filename from .json to .js to see if I could work with it that way without the warning, but the file had errors once I changed the extension.
TestJSONFile.json looks like:
{
"something": [
{
"prop1": "prop1value",
"prop2": "prop2value",
...
},
{
"prop1": "prop1value",
"prop2": "prop2value",
...
},
...
}
In CurrentComponent.js, I'm importing the JSON values:
import * as SampleResponse from '../tools/TestJSONFile'
And then accessing the data like this:
const data = SampleResponse.something // Already a JS object, no need to parse
And then can work with it like any other object:
for (let item of data) { const prop1 = item.prop1 }
Currently you are importing the JSON file as below
import * as SampleResponse from '../tools/TestJSONFile'
Change it to
import SampleResponse from '../tools/TestJSONFile'
I use Excel data as a data source. I want to create slug dynamically and use Gatsby docs as an example. https://www.gatsbyjs.com/docs/tutorial/part-seven/
But this does not work, because I don't use Markdown files. I changed 'MarkdownRemark' to 'ExcelData'.
exports.onCreateNode = ({ node, getNode }) => {
if (node.internal.type === `ExcelData`) {
const fileNode = getNode(node.parent)
console.log(`\n`, fileNode.relativePath)
}
}
When You look at Gatsby docs, code print to the terminal two markdown files relative paths:
pages/sweet-pandas-eating-sweets.md
pages/pandas-and-bananas.md.
Mine code prints out same path multiple time, because there is only one Excel file.
I try to change the code and use data that is in an Excel file.
const fileNode = getNode(_9)
But this does not work and I get an errors like:
"gatsby-node.js" threw an error while running the onCreateNode lifecycle:
_9 is not defined
const fileNode = getNode(node._9)
Cannot read property 'relativePath' of undefined
Is it possible to change (node.parent) or not?
I assume you're using https://www.gatsbyjs.com/plugins/gatsby-transformer-excel/ already?
Gatsby has a new filesystem routing API that means creating routes like this is much easier called the File System Routing API — this links to the section on Collection Routes which automatically creates pages from every node in a collection without needing to create slugs manually in gatsby-node.js.
E.g. your type is ExcelData so you'd just need to create a collection route component at src/pages/{ExcelData.title}.js (assuming your spreadsheet has a field named title) to create pages for all your spreadsheet rows.
This works with any type and any field.
I learn Reactjs and came across this
I have an images folder in the public React project created with create-react-app.
I place a json file and a jpg in it and I can use the jpg but not the json.
let photo = "./images/some.jpg";
let file = "./images/somejson.json";
The image works out of the box like
<img alt="image" src={photo} />
But the json cant be read I get Cannot read property 'label' of undefined
<h1 className="title">{file.basics.label}</h1>
And this is the json
{
"basics": {
"name": "Foo Bar",
"label": "Some label"
}
}
Please advice what is wrong?
You should import JSON file before use its properties, your file variable is just a path to a JSON file. If you are using create-react-app it has json-loader, if not you have to install it and configure your Webpack, I can assume you already use it, and then you can import JSON file and use it.
import json from "./images/somejson.json"
...
<img src={json.someSrc} />
you have to replace .json from public to src folder. And also you should export your variable file in the somejson.json file. and also you should import this variable too.
In your JS file, import your json file with correct path.
import file from './somejson.json';
If you need to retain this file in public/ and also use it in React app, add this library.
https://github.com/oklas/react-app-rewire-alias
import file from '../public/images/somejson.json';
I have a simple reactJS application. In this app, I have a web page where I am testing the Filepond component. I also have a nodeJs server, called by the Filepond component when the file is uploaded.
Here is the code when Filepond component is defined:
render() {
return(....
<FilePond allowMultiple={false} name='file' acceptedFileTypes='application/pdf' server='http://localhost:80/upload' uploadId=999 />
....
);
}
What I want?
1 - upload a single PDF file
2 - pass the uploadId to the server when uploading the file
What is happening?
=> the file is uploaded but the acceptedFileTypes="application/pdf" is not taken into account because I can select any file, no matter its type
=> I am not able to pass/get the uploadId value
Any help on how I can achieve these 2 points?
Except these 2 points, the component works well and I am able to upload the file correctly.
Thank you,
Best regards
Have you registered the plugin for validating file type?
For example:
import { FilePond, registerPlugin } from 'react-filepond';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
registerPlugin(FilePondPluginFileValidateType);
class App extends React.Component { ...
Once you have installed and imported, then FilePond should do the rest on its own if you have the appropriate prop on the component.
As for the ID. What are you trying to accomplish with that? I have an implementation going to a node server and it managed to do everything I needed it to without the ID implementation.
I am new to react router. I use react-router-dom 4.2.2
in my router set up I have:
<Route path={"/confirmuser/:confirmation_code/:username"} component={ConfirmUser} />
and here is a sample url I am trying to achieve:
localhost:3003/confirmuser?confirmation_code=986797&username=5f1
As you see I am trying to send multiple query strings.
in the confirmUser I read the query strings as follow:
console.log(this.props.match.params.confirmation_code);
console.log(this.props.match.params.username);
However I do not even get directed to this component and it seems react is not able to route to that page properly.
Any idea?
React-router v4 doesn't parse query strings anymore, so you either have to do the parsing yourself (not recommended), or use a package like query-string. An easy way to access the values is with a wrapper component, like this:
import * as queryString from 'query-string';
..
const WrappedConfirmUser = () => {
const {confirmation_code, username} = queryString.parse(location.search);
return <ConfirmUser confirmation_code={confirmation_code} username={username}/>;
}
You are trying to map search-params to path segments?
The Route you defined will try to match the path, not the search params.
Try:
http://localhost:3003/confirmuser/986797/5f1
and the values will be in this.props.match.params like this:
{
confirmation_code: '986797',
username: '5f1',
}
if you still want to read the search params, you can access them from this.props.location.search, but react-router will not match them to a route for you.
Your path doesn't match your url.
It matches localhost:3003/confirmuser/986797/5f1
Then you can access params using extra prop match:
{props.match.params.confirmation_code}
{props.match.params.username}