如何使用react-router在浏览器中停止/#/？

Question

/#/使用react-router时,有什么方法可以阻止在浏览器的地址栏中显示？这与ReactJS有关.即点击链接转到新路线显示localhost:3000/#/或 localhost:3000/#/about.视路线而定.

Answer 1

对于react-router的版本1,2和3,将路由设置为URL映射方案的正确方法是将历史实现传递给history参数<Router>.从历史文件:

简而言之,历史记录知道如何监听浏览器的地址栏以进行更改,并将URL解析为路由器可用于匹配路由并呈现正确组件集的位置对象.

版本2和3

在react-router 2和3中,您的路由配置代码如下所示:

import { browserHistory } from 'react-router'
ReactDOM.render (( 
 <Router history={browserHistory} >
   ...
 </Router> 
), document.body);

版本1

在版本1.x中,您将改为使用以下内容:

import createBrowserHistory from 'history/lib/createBrowserHistory'
ReactDOM.render (( 
  <Router history={createBrowserHistory()} >
   ...
  </Router> 
), document.body);

来源:2.0版升级指南

版本4

对于即将发布的react-router版本4,语法已经发生了很大变化,并且需要将其BrowserRouter用作路由器根标记.

import BrowserRouter from 'react-router/BrowserRouter'
ReactDOM.render (( 
  <BrowserRouter>
   ...
 <BrowserRouter> 
), document.body);

源反应路由器版本4文档

Answer 2

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

对于当前版本0.11和转发,您需要添加Router.HistoryLocation到Router.run().<Routes>现已弃用.有关 0.12.x HistoryLocation实现,请参阅升级指南.

Answer 3

如果您不需要支持IE8,您可以使用浏览器历史记录和react-router将使用window.pushState而不是设置哈希.

具体操作方法取决于您使用的React Router的版本:

• v4:https://reacttraining.com/react-router/web/api/BrowserRouter
• v3:https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md
• v2:https://github.com/ReactTraining/react-router/blob/v2.0.0/docs/guides/Histories.md
• v1:https://github.com/ReactTraining/react-router/blob/1.0.x/docs/guides/basics/Histories.md

Answer 4

您实际上可以使用.htaccess来完成此任务.浏览器通常需要查询字符串分隔符?或#确定查询字符串的开始位置和目录路径的结束位置.我们想要的最终结果是www.mysite.com/dir ,我们需要在Web服务器搜索它认为我们要求的目录之前捕获该问题/dir.所以我们将一个.htaccess文件放在项目的根目录中.

    # Setting up apache options
    AddDefaultCharset utf-8
    Options +FollowSymlinks -MultiViews -Indexes
    RewriteEngine on

    # Setting up apache options (Godaddy specific)
    #DirectoryIndex index.php
    #RewriteBase /


    # Defining the rewrite rules
    RewriteCond %{SCRIPT_FILENAME} !-d
    RewriteCond %{SCRIPT_FILENAME} !-f

    RewriteRule ^.*$ ./index.html

然后使用window.location.pathname获取查询参数

然后,如果需要,您可以避免使用react路由,如果您愿意,也可以只操作URL和浏览器历史记录.希望这有助于某人......

Answer 5

安装历史记录包

npm install history --save

接下来从历史记录中导入createHistory和useBasename

import { createHistory, useBasename } from 'history';
...
const history = useBasename(createHistory)({
  basename: '/root' 
});

如果你的应用网址是www.example.com/myApp,那么/ root应该是/ myApp.

将历史记录变量传递给路由器

render((
  <Router history={history}>
    ...
  </Router>
), document.getElementById('example'));

现在,对于所有链接标记,在所有路径前面附加"/".

<Link to="/somewhere">somewhere</Link>

该解决方案的灵感来自React-Router示例, 遗憾的是,它们的API中没有正确记录.