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>

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