首页 > react-router2.0如果关闭了页面路由就失效了

react-router2.0如果关闭了页面路由就失效了

比如这样一个路由
/articles/6
如果是在页面上点击一个链接,是能正常访问的,
但是如果在浏览器上点击刷新或者输入地址,就马上出现
Cannot GET /articles/6
这样的话,用react做的网站不就没办法提供收藏功能了吗?
这样的话用户体验反而更差了吧?
还是说我哪里没有写对。
下面附上代码

import { Router, Route, browserHistory,IndexRoute } from 'react-router';


//... 省略了一些组件


class Routers extends Component {

    constructor(props) {
        super(props);
    }


    render () {
        return (
            <Router history={browserHistory}>
                <Route path="/" component = {App}>
                    <IndexRoute component = {Article}/>
                    <Route path="articles" component = {Article}>
                        <Route path = ":id" component = {ArticleDetail}/>
                    </Route>
                    <Route path="*" component = {NoMatch}/>
                </Route>
            </Router>
        );
    }
}

React.render (
    <Routers/>,
    document.body
);

然后Link那边是这样写的

<Link to = {"/articles/"+row.id}>{row.name}</Link>

我的想法是能够像正常web应用那样,路由可以标识唯一资源。
有没有办法实现?
还是说要退回老版本?


原因是服务端路由的处理,服务端需要对react-router里列出的路由返回那个默认的html文件。

可以判断只要不是请求静态资源文件,都返回这个静态html,然后不存在的页面也用react显示404页面,当然这样并不好,但影响不大,配置简单。

避免上面问题的方式是服务端渲染。

楼上用hash方式也可以解决,但seo有影响,开发阶段可以这样干。


http://nphard.me/2016/03/07/nginx-for-react/
也遇到类似问题,不知道对你有没有帮助


输链接的时候要这样输

www.demo.com/#/articles/6

不是这样输

www.demo.com/articles/6

服务器部署是用node还是nignx,如果是node则需要匹配任意路由到index.html,如果nignx则用配置默认index

【热门文章】
【热门文章】