比如这样一个路由
/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