Understanding React Router params

Question

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>

What version of react router are you using? – Joshua Terrill Nov 28 '16 at 20:34 — Joshua Terrill, Nov 28 '16 at 20:34
@JoshuaTerrill I am using `"react-router": "^2.8.1"` – Simo Mafuxwana Nov 28 '16 at 20:36 — Simo Mafuxwana, Nov 28 '16 at 20:36

score 1 · Accepted Answer · answered Nov 28 '16 at 21:02

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" />

answered Nov 28 '16 at 21:02

John Ruddell

25,283
6
57
86

Thanks. Solved the 1st issue. Any suggestions on the second issue? – Simo Mafuxwana Nov 28 '16 at 21:19
Yes your route is defined wrong.. you're missing a / on the path with your dynamic route – John Ruddell Nov 28 '16 at 21:24
Sorry that is a typo (post updated) , I dont have / in the routes because as I understand it if you nest routes - parent being `` - all child routes will have / from the base parent route. Isn't that so? ... But i tried with / it still throws the syntaxError. – Simo Mafuxwana Nov 28 '16 at 21:37
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 – John Ruddell Nov 28 '16 at 21:47
I couldn't get jquery working when inserted via imports so I put it in the index.html at the above closing body tag `` – Simo Mafuxwana Nov 29 '16 at 05:07
1

@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 – John Ruddell Nov 30 '16 at 06:04
it was the relative path after all... `.` :( :( Thank you – Simo Mafuxwana Nov 30 '16 at 12:18

Understanding React Router params

1 Answers1