6

I have several components displayed with react router that have dynamic url paths. An example path I have is

<Route path="/newproject/:id" onEnter={checkSesh} component= {ProjectDetails} />

When entering this component, I have a componentWillMount function that extract the id part of the url so that I can get the info for the correct project and render it on the ProjectDetails component.

  componentWillMount() {
    var id = this.props.router.params.id
    this.props.teamDetails(id);
  }

this.props.teamDetails(id) this calls a redux action creator that will make an axios request to an express route that will get the project info from the database. 

export function teamDetails(id) {
    return function(dispatch) {
    axios.get('/getteaminfo/' + id)
      .then(res => {
        dispatch({ type: "SET_TEAM_DETAILS", payload: {
                teamInfo: res.data.teamInfo,
                admin: res.data.admin,
                adminID: res.data.teamInfo.teamAdmin,
                teamMembers: res.data.teamInfo.teamMembers
            } 
        })

      });
    }
}

everything works fine upon visiting the page after already being logged in etc. But when I refresh the page /newproject/:id, i get an error Uncaught SyntaxError: Unexpected token <. An example url in my browser looks like http://localhost:3000/newproject/58df1ae6aabc4916206fdaae. When I refresh this page, I get that error. The error is complaining about my <!DOCTYPE html> tag at the very top of my index.html for some reason. This index.html is where all of React is being rendered.

henhen
  • 1,038
  • 3
  • 18
  • 36

2 Answers2

1

I found the answer here: react-router dynamic segments crash when accessed I added <base href="/" /> into the <head>of my index.html. You can also read more info here: Unexpected token < error in react router component

logixplayer
  • 939
  • 2
  • 13
  • 23
0

When page is refreshed store state is not preserved. Make sure the state is not important to load the page, or at least initialized properly every time.

For e.g. login information if saved in store and not on browser with localStorage or cookies etc.. then on refresh, the error will come when trying to access /getteaminfo/ route through axios. The response will have error html and it can't be parsed by js.

Please check your web console on for more information. You can use chrome extension like https://github.com/zalmoxisus/redux-devtools-extension which will show your store and etc..

Make sure to check what /getteaminfo/ gives with id is not passed.

Also, make sure on your server side, did you route requests to react-router path through something like this?

e.g. express js,

app.get('*', function response(req, res) {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

be sure to sendFile with the real location of index.html

uddhab
  • 338
  • 4
  • 9
  • Yes I have that star path. The problem is when I refresh the page, when the url is something like `http://localhost:3000/newproject/58df1ae6aabc4916206fdaae`, I was thinking the componentWillMount function would extract the id with `var id = this.props.router.params.id` and then send that to the action creator teamDetails, which will use that Mongo _id to retrieve the information. To handle sessions, I am jsut calling the `checkSesh` action that will make an axios request that will send back a session object I store user information to and save that to the store. – henhen Apr 02 '17 at 02:46
  • The web console doesn't show any more details on error? you mean the id is set null there? – uddhab Apr 02 '17 at 03:06
  • The error I mentioned in post is coming from a complaint in my index.html. It is complaining about the ` ` at the very top of my index.html, where all my react components are rendered. I am not sure why it is doing this. As far as id being set to null, the variable is initially null upon refresh, but I am assuming `var id = this.props.router.params.id` this will grab the id in my url `http://localhost:3000/newproject/58e063298fa7630974faf99c` and then send that to the server to retrieve the information needed to render the page. – henhen Apr 03 '17 at 04:28
  • i am sure, you will be able to see request/response in 'network' tab of web developer tools in browser. Probably the axios is getting your 'html' file instead of response so the error comes. – uddhab Apr 05 '17 at 02:22
  • Wouldn't the `*` route prevent all react router routes to conflict with express routes? router.get('*', function(req,res) { res.sendFile(path.join(__dirname + "/..", "public", "index.html")); }); – henhen Apr 08 '17 at 07:47
  • 1
    @henhen did you add `/..`? okay. but the original will also work, wouldn't it? react router is client side js routing system. On server side, you add * route after your other server side routes, so that if the request goes to server, any path would serve the entry html generator with required js so the react router can work on client side. – uddhab Apr 12 '17 at 10:27
  • I found the answer here: https://stackoverflow.com/questions/28253162/react-router-dynamic-segments-crash-when-accessed/34526066#34526066 I added into the of my index.html. You can also read more info here: https://stackoverflow.com/questions/29718481/unexpected-token-error-in-react-router-component – logixplayer May 11 '20 at 14:12