React Router w/ URL params
Question
I am using react router and have a route path taskSupport/:advertiserId with params but when I try to go to the link, http://localhost:8080/taskSupport/advertiserId , I get a bunch of 404 (Not found) errors for all my css files and my client.min.js file. Anyone know what's going on? Sorry I'm a react noob... Any help will be much appreciated!
<Route path="/">
<IndexRoute component={Layout}></IndexRoute>
<Route path="about" component={About}></Route>
<Route path="referral" component={Referral}></Route>
<Route path="taskSupport(/:advertiserId)" name="taskSupport" component={TaskSupport}></Route>
<Route path="faq" component={Faq}></Route>
<Route path="faq-plain" component={FaqPlain}></Route>
</Route>
My HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>BitMaker</title>
<link rel="icon" type="image/png" href="img/bitmaker.png" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/faq.css">
<link rel="stylesheet" type="text/css" href="css/error404.css">
<link rel="stylesheet" type="text/css" href="css/about.css">
<link rel="stylesheet" type="text/css" href="css/taskSupport.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prompt:300,400,500,600,700" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
appHtml
</div>
<script src="client.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
3 answers
solution1
1 ACCPTED 2017-04-26 20:04:37
This is a relative links issue.
You were using relative links which would try to obtain them from "/taskSupport/:advertiserID/filename.ext" instead of from the root of the domain.
To pull them from the root, have your reference links start with a forward slash '/' '/css/stylesheet.css' and '/client.min.js' .
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css">
and
<script src="/client.min.js"></script>
solution2
-1 2017-04-26 19:27:59
Your links to react routes should look like this.
<Link to="/taskSupport/adID123"></Link>
you'll need to import the link component from react-router like this.
import { Link } from 'react-router'
I also think you want your route set up like this
<Route path="/taskSupport/(:advertiserId)" name="taskSupport" component={TaskSupport}></Route>
If the forward slash is not looked for after taskSupport then the regex is pretty much this,
<Route path="taskSupport*(/:advertiserId)" name="taskSupport" component={TaskSupport}></Route>
Since taskSupport* will match taskSupport/abc123/ the optional part will never be matched.
If you change the route to this
<Route path="/taskSupport/(:advertiserId)" name="taskSupport" component={TaskSupport}></Route>
Then the regex knows when to end it's match and start looking for an advertiserId
Also when you include local CSS in your project you should use an import inside react and not modify your HTML file.
import './index.css';
solution3
-1 2017-04-26 19:28:14
You're using "HTML5 Mode" style routes (as opposed to # routes) for your single page app
Without knowing more about your project and its dependencies, you can try to set a <base> in your HTML head, for example:
<!DOCTYPE html>
<html>
<head>
<base href="/" />
</head>
<body>
<div id="root"></div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.