I have an API that has routes managed by MVC.
On top of that i want to build a SPA with react.
However the routes I build from inside my react app cannot be reached, i get an 404 from ISS, here us a stub from my code.
export default class Layout extends React.Component {
render() {
<div>
<Router history={ hashHistory }>
<Route path="/" component={ Home } >
<Route path="login" component={ Login } />
</Route>
</Router>
<div>
}
When I execute this code as a standalone whithout the backend, it works flawlessly.
Is there a way to tell MVC to render reacts routes for a set url, let’s say “/app/*”.
Thanks in advance.
Advertisement
Answer
As i mentioned in my comment, i may have a solution that can fit your needs.
This solution requires an MVC Controller and a relevant MapRoute().
The general idea is to deliver the index.html page via MVC using a controller and cshtml and configure on react-router a basename when creating browserHistory.
The key here is that the basename value must contain the entire path (without the domain) up to the controller name.
for example:
given this controller:
public class ReactController : Controller
{
public ActionResult Index()
{
return View();
}
}
and cshtml:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<title>app name</title>
<link href="path/to/file.css/if/needed" rel="stylesheet" />
</head>
<body>
<div id="app"></div>
<script src="path/to/bundle.js"></script>
</body>
</html>
and routeMap:
routes.MapRoute(
name: "reactApp",
url: "react/{*pathInfo}",
defaults: new { controller = "React", action = "Index", id = UrlParameter.Optional }
);
Now, lets say your app is published under http://example.org/appName/
then you’ll need to make sure react-router won’t delete the "appName" portion of the URL when changing it.
for example, if you’re in the Home Page – http://example.org/appName/home
and you move to the About Page, you want react-router to keep the "appName"
like so: http://example.org/appName/react/about
and not like so http://example.org/about.
Although this will work just fine as you’re not posting this URL back to the server, you will face a problem when you will try to go directly to the “About” page. the server will return a 404 when you send the request with this URL: http://example.org/about/
instead of this one: http://example.org/appName/react/about.
My soulution to this problem is to pass react-router a basename that includes the appName + sub folders (if any) + the controller name.
I’m using useRouterHistory and creating the browserHistory instead of import it from react-router
const browserHistory = useRouterHistory(createHistory)({
basename: appName
});
the appName variable is as follow:
const controller = "/react"; const pathName = window.location.pathname; const appName = pathName.substring(0,pathName.indexOf(controller) + controller.length);
This can be refactored as a function but basically it gets the pathname up to the controller name (as a convention with your MVC app) including the controller name.
that way react-router will keep this path on every URL change.
In our case "appName/react".