blocks|key|85978|text|Router.run(routes,+Router.HistoryLocation,+function+(Handler)+{
++React.render(<Handler/>,+document.body);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|85979|对于当前版本0.11及更高版本，您需要在Router.run()中添加Router.HistoryLocation。<Routes>现在已被弃用。适用于0.12.x+HistoryLocation实施的See+the+Upgrade+Guide。|unstyled|offset|length|style|CODE|85980|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/rackt/react-router/blob/d49199e4b939a01f1e9f18188166a8f8a9f52a5b/UPGRADE_GUIDE.md#react-012^0|0|K|C|Z|M|1M|8|2T|L|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@$G|U|H|V|I|J]|$G|W|H|X|I|J]|$G|Y|H|Z|I|J]]|9|@$G|10|H|11|1|12]]|A|$]]|$1|K|3|-4|5|F|7|13|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<pre class="lang-js prettyprint-override"><code>Router.run(routes, Router.HistoryLocation, function (Handler) {
 React.render(&lt;Handler/&gt;, document.body);
});
</code></pre>

For the current version 0.11 and forward, you need to add <code>Router.HistoryLocation</code> to <code>Router.run()</code>. <code>&lt;Routes&gt;</code> are now deprecated. <a href="https://github.com/rackt/react-router/blob/d49199e4b939a01f1e9f18188166a8f8a9f52a5b/UPGRADE_GUIDE.md#react-012">See the Upgrade Guide</a> for the 0.12.x HistoryLocation implementation.

blocks|key|4592373|text|实际上，您可以使用.htaccess来完成此任务。浏览器通常需要查询字符串分隔符?或#来确定查询字符串的开始位置和目录路径的结束位置。我们想要的最终结果是www.mysite.com/dir，因此我们需要在web服务器搜索它认为我们请求/dir的目录之前捕获该问题。因此，我们在项目的根目录中放置了一个.htaccess文件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4592374|++++#+Setting+up+apache+options
++++AddDefaultCharset+utf-8
++++Options+%2BFollowSymlinks+-MultiViews+-Indexes
++++RewriteEngine+on

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


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

++++RewriteRule+%5E.*$+./index.html|code-block|syntax|javascript|4592375|然后使用window.location.pathname获取查询参数|4592376|如果你愿意，你可以避免使用react路由，如果你愿意，也可以只操作url和浏览器历史记录。希望这对某些人有帮助。|4592377|entityMap^0|14|1|16|1|25|I|3A|4|47|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|P|$]]

You can actually use .htaccess to accomplish this. The browser normally needs the query string delimiter <code>?</code> or <code>#</code> to determine where the query string begins and the directory paths end.
The end result we want is <code>www.mysite.com/dir</code>
So we need to catch the issue before the web server searches for the directory it thinks we asked for <code>/dir</code>. 
So we place a <code>.htaccess</code> file in the root of the project.

<pre><code> # 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
</code></pre>

Then you obtain the query parameters with window.location.pathname

You can then avoid using react routes if you want and just manipulate the url and browser history if you want as well.
Hope this helps someone...

blocks|key|86085|text|安装历史包|type|unstyled|depth|inlineStyleRanges|entityRanges|data|86086|npm+install+history+--save|code-block|syntax|javascript|86087|接下来，从历史记录中导入createHistory和useBasename|86088|import+{+createHistory,+useBasename+}+from+'history';
...
const+history+=+useBasename(createHistory)({
++basename:+'/root'+
});|86089|如果你的应用url是www.example.com+/myApp，那么/root应该是/myApp。|86090|将历史记录变量传递给路由器|86091|render((
++<Router+history={history}>
++++...
++</Router>
),+document.getElementById('example'));|86092|现在，对于所有的Link标签，在所有路径的前面附加一个"/“。|86093|<Link+to="/somewhere">somewhere</Link>|86094|该解决方案的灵感来自于React-Router+Example，不幸的是，在他们的应用程序接口中没有适当的文档。|offset|length|86095|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/rackt/react-router/blob/latest/examples/shared-root/app.js^0|0|0|0|0|0|0|0|0|0|B|K|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|18|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1F|8|@]|9|@$W|1G|X|1H|1|1I]]|A|$]]|$1|Y|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

Install the history package

<pre><code>npm install history --save
</code></pre>

Next import createHistory and useBasename from the history

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

if your app url is www.example.com/myApp, then /root should be /myApp.

pass the history variable to the Router

<pre><code>render((
 &lt;Router history={history}&gt;
 ...
 &lt;/Router&gt;
), document.getElementById('example'));
</code></pre>

Now for all your Link tags append a "/" in front of all the paths.

<pre><code>&lt;Link to="/somewhere"&gt;somewhere&lt;/Link&gt;
</code></pre>

The inspiration of the solution came from <a href="https://github.com/rackt/react-router/blob/latest/examples/shared-root/app.js" rel="noreferrer">React-Router Example</a>
Which unfortunately, was not properly documented in their API.

Any way to prevent <code>/#/</code> from showing in the browser's address bar when using react-router? That's with ReactJS. i.e. Clicking on links to go to a new route shows <code>localhost:3000/#/</code> or
<code>localhost:3000/#/about</code>. Depending on the route.

How to stop /#/ in browser with react-router?

服务器

路由器

路由

当使用react-router时，有什么方法可以防止/#/在浏览器的地址栏中显示？那是和ReactJS在一起。即点击链接以转到新的路线，显示localhost:3000/#/或localhost:3000/#/about。根据路线而定。

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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