diff --git a/frontend/src/app.js b/frontend/src/app.js
index 9f7fa1bd86..dd3c6c33ff 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -64,9 +64,6 @@ class App extends Component {
     let href = window.location.href.split('/');
     this.getDrafts();
     this.setState({currentTab: href[href.length - 2]});
-    if (this.currentTab) {
-      this.setState({currentTab: this.currentTab});
-    }
   }
 
   getDrafts = () => {
diff --git a/frontend/src/components/dir-view/dir-view.js b/frontend/src/components/dir-view/dir-view.js
index 6d2d684995..62154e28f9 100644
--- a/frontend/src/components/dir-view/dir-view.js
+++ b/frontend/src/components/dir-view/dir-view.js
@@ -44,6 +44,8 @@ class DirView extends React.Component {
   }
 
   componentDidMount() {
+    // eg: http://127.0.0.1:8000/library/repo_id/repo_name/**/**/\
+    let location = decodeURIComponent(window.location.href);
     let repoID = this.props.repoID;
     seafileAPI.getRepoInfo(repoID).then(res => {
       let repo = new Repo(res.data);
@@ -53,8 +55,11 @@ class DirView extends React.Component {
         permission: repo.permission === 'rw',
         currentRepo: repo,
       });
-
-      this.updateDirentList(this.state.path);
+      let repoName = repo.repo_name;
+      let index = location.indexOf(repoName);
+      let path = location.slice(index + repoName.length);
+      this.updateDirentList(path);
+      this.setState({path: path});
     });
   }
   
@@ -81,7 +86,7 @@ class DirView extends React.Component {
       this.updateDirentList(direntPath);
       this.setState({path: direntPath});
 
-      let fileUrl = siteRoot + 'library/' + this.state.repoID + '/' + this.state.repoName + direntPath;
+      let fileUrl = siteRoot + 'library/' + this.state.repoID + '/' + this.state.repoName + Utils.encodePath(direntPath);
       window.history.pushState({url: fileUrl, path: direntPath}, direntPath, fileUrl);
     } else {
       const w=window.open('about:blank');
@@ -301,7 +306,7 @@ class DirView extends React.Component {
     this.updateDirentList(path);
     this.setState({path: path});
 
-    let fileUrl = siteRoot + 'library/' + this.state.repoID + '/' + this.state.repoName  + path;
+    let fileUrl = siteRoot + 'library/' + this.state.repoID + '/' + this.state.repoName  + Utils.encodePath(path);
     window.history.pushState({url: fileUrl, path: path}, path, fileUrl);
   }
 
diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
index 9f0c260532..70324cee90 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -376,7 +376,7 @@ class DirentListItem extends React.Component {
   render() {
     let { path, dirent } = this.props;
     let direntPath = Utils.joinPath(path, dirent.name);
-    let href = siteRoot + 'wiki/lib/' + this.props.repoID + direntPath;
+    let href = siteRoot + 'wiki/lib/' + this.props.repoID + Utils.encodePath(direntPath);
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
index 608fb98a45..b575759df1 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -91,7 +91,7 @@ class SharedRepoListItem extends React.Component {
     });
 
     //todo change to library; div-view is not compatibility
-    let libPath = `${siteRoot}library/${this.props.repo.repo_id}/`;
+    let libPath = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
 
     return { iconUrl, iconTitle, libPath };
   }
@@ -285,7 +285,7 @@ class SharedRepoListItem extends React.Component {
       <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
         <td><img src={iconUrl} title={iconTitle} alt={iconTitle}/></td>
         <td>
-          <a href={libPath}>{repo.repo_name}</a><br />
+          <Link to={libPath}>{repo.repo_name}</Link><br />
           <span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span>
           <span className="item-meta-info">{repo.size}</span>
           <span className="item-meta-info" title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</span>
diff --git a/frontend/src/pages/my-libs/item.js b/frontend/src/pages/my-libs/item.js
index cb4aa993b0..0d9e2b9a76 100644
--- a/frontend/src/pages/my-libs/item.js
+++ b/frontend/src/pages/my-libs/item.js
@@ -168,7 +168,7 @@ class Item extends Component {
       'is_admin': data.is_admin,
       'permission': permission
     });
-    data.url = `${siteRoot}library/${data.repo_id}/`;
+    data.url = `${siteRoot}library/${data.repo_id}/${Utils.encodePath(data.repo_name)}`;
 
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
     let shareIconClassName = 'sf2-icon-share sf2-x op-icon' + iconVisibility; 
@@ -243,7 +243,7 @@ class Item extends Component {
             />
           )}
           {!this.state.showChangeLibName && data.repo_name && (
-            <Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link>
+            <Link to={data.url}>{data.repo_name}</Link>
           )}
           {!this.state.showChangeLibName && !data.repo_name && 
             (gettext('Broken (please contact your administrator to fix this library)'))
@@ -261,7 +261,7 @@ class Item extends Component {
         <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
         <td>
           {data.repo_name ?
-            <Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link> :
+            <Link to={data.url}>{data.repo_name}</Link> :
             gettext('Broken (please contact your administrator to fix this library)')}
           <br />
           <span className="item-meta-info">{Utils.formatSize({bytes: data.size})}</span>