Question

我已经开始使用react.js作为前端Web应用程序和C＃Web API，现在我想弄清楚如何设置路由。

目前的行为：

当我运行服务器时，应用程序正确加载url： localhost：port / page1
我可以轻松地在导航栏中的页面之间切换。浏览器中的URL在 localhost：port / page1 之间切换， localhost：port / page2 和 localhost：port / page3
但是如果我直接输入 localhost：port / page3 ，我会得到No HTTP resource was found that matches the request URI localhost:port/page3

你能否解释为什么使用导航条反应我可以正确地获取网址但是当我直接输入它会失败？

RouteConfig.cs（C＃WebApi）

public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
               name: "Default",
               url: "*",
               defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
           );
        }
    }

routes.js（反应应用） 其中domu为page1，pacienti为page2，tagy为page3

import React from 'react'
import { Route, IndexRoute, Redirect, IndexRedirect, hashHistory } from 'react-router'


import Layout from './components/utils/layout';
import Domu from './pages/domu';
import Pacienti from './pages/pacienti';
import Tagy from './pages/tagy';

const routes = (
    <Router history={hashHistory}>
        <Route history={hashHistory} path="/" component={Layout}>
            <IndexRoute component={Domu}/>
            <IndexRedirect to="domu" />
            <Route path="domu" component={Domu}/>
            <Route path="pacienti" component={Pacienti}/>
            <Redirect from="*" to="pacienti" />
            <Route path="tagy" component={Tagy}/>
        </Route>
    </Router>
);

export default routes;

header.js

import React from 'react';

import { Navbar, Nav, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';


export default class Header extends React.Component {
  render() {
    return (
        <Navbar inverse>
            <Navbar.Header>
                <Navbar.Brand>
                    <span style={{paddingLeft: '1em'}}>FNO - Urgent</span>
                </Navbar.Brand>
                <Nav>
                    <LinkContainer to="/Domu">
                        <NavItem eventKey={1} href="#/domu">Domu</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/Pacienti">
                        <NavItem eventKey={2} href="#/pacienti">Pacienti</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/Tagy">
                        <NavItem eventKey={2} href="#/tagy">Tagy</NavItem>
                    </LinkContainer>
                </Nav>

            </Navbar.Header>
            <Nav pullRight>
                <NavItem eventKey={1} href="#">Logout</NavItem>
            </Nav>
        </Navbar>
    );
  }
}

修改源代码可在此处获取：https://github.com/trannann/reactUrgent

在C＃server中为React.js前端Web应用程序配置路由

0 个答案: