0

I have a static route list and a dynamic user/:id. Navigating between the 2 pages is giving problems (1) When navigating to list from user/:id it appends it as user/list. (2) When refreshing the page on user/:id I get Uncaught SyntaxError: Unexpected token < jquery-3.1.1.min.js:1 which breaks all styling.

How do I tell the router to not append if the route I am navigating to is list?

Why does is it throw jQuery SyntaxError when refreshing no a dynamic route?

import React, { Component } from 'react';
import { Router, Route, browserHistory, indexRoute } from 'react-router';

import Root from './components/Root';
import Home from './components/Home';
import ComponentA from './components/ComponentA';
import ComponentB from './components/ComponentB';

class App extends Component {
  render() {
    return (
        <Router history={browserHistory}>
          <Route path="/"  component={Root}>
          <indexRoute component={Home} />
          <Route path="list" component={ComponentA} />
          <Route path="users/:id" component={ComponentB} />
        </Route>
      </Router>
    );
  }
}

export default App;

Edit: I found these answers suggest adding type="text/jsx" to the src. When I do and I don't get syntaxError now but the js (menu dropdowns, modals etc.) code is just not working.

...
    <script type="text/jsx" src="./jquery/jquery-3.1.1.min.js"></script>
    <script type="text/jsx" src="./bootstrap/js/bootstrap.min.js"></script>
    <script type="text/jsx" src="./custom.js"></script>
  </body>
2
  • What version of react router are you using? Commented Nov 28, 2016 at 20:34
  • @JoshuaTerrill I am using "react-router": "^2.8.1" Commented Nov 28, 2016 at 20:36

1 Answer 1

1

Most likely your links aren't defined properly. You are probably missing a / that tells the router that you are trying to reset the path.

<Link to="/link" />

instead of

<Link to="link" />
Sign up to request clarification or add additional context in comments.

7 Comments

Thanks. Solved the 1st issue. Any suggestions on the second issue?
Yes your route is defined wrong.. you're missing a / on the path with your dynamic route
Sorry that is a typo (post updated) , I dont have / in the routes because as I understand it if you nest routes - parent being <Route path="/" component={Root}></Route> - all child routes will have / from the base parent route. Isn't that so? ... But i tried with / it still throws the syntaxError.
So that error message looks like your server is hitting the catch all and returning the html file instead of a js file. Check your imports
@D'loDeProjuicer probably a bad path. try not to use relative paths in your html imports. instead have an absolute path. also you probably dont need jquery anyways since you are using react
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.