blocks|key|2673385|text|在阅读了更多的文档后，我找到了解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2673386|https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md|offset|length|2673387|我只需要访问组件实例的注入属性location，如下所示：|style|CODE|2673388|var+currentLocation+=+this.props.location.pathname|code-block|syntax|javascript|2673389|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|2S|0|0|F|8|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@$D|11|E|12|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|C]]]]

After reading some more document, I found the solution:

<a href="https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md" rel="noreferrer">https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md</a>

I just need to access the injected property <code>location</code> of the instance of the component like:

<pre><code>var currentLocation = this.props.location.pathname
</code></pre>

blocks|key|121896|text|如果您使用历史记录，则路由器会将历史记录中的所有内容放入该位置，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|121897|this.props.location.pathname;
this.props.location.query;|code-block|syntax|javascript|121898|明白了吗？|121899|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you use the history,then Router put everything into the location from the history,such as:

<pre><code>this.props.location.pathname;
this.props.location.query;
</code></pre>

get it?

blocks|key|2884992|text|您可以使用以下命令获取当前路径|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2884993|const+currentRoute+=+this.props.routes[this.props.routes.length+-+1];|code-block|syntax|javascript|2884994|通过...which，您可以从最低级别的active+<Route+...>组件访问属性。|offset|length|style|CODE|2884995|鉴于..。|2884996|<Route+path="childpath"+component={ChildComponent}+/>|2884997|currentRoute.path返回'childpath'，currentRoute.component返回function+_class()+{+...+}。|2884998|entityMap^0|0|0|R|B|0|0|0|0|H|J|B|V|M|1J|P|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|11|8|@$I|12|J|13|K|L]|$I|14|J|15|K|L]|$I|16|J|17|K|L]|$I|18|J|19|K|L]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$]]

You can get the current route using 

<pre><code>const currentRoute = this.props.routes[this.props.routes.length - 1];
</code></pre>

...which gives you access to the props from the lowest-level active <code>&lt;Route ...&gt;</code> component.

Given...

<pre><code>&lt;Route path="childpath" component={ChildComponent} /&gt;
</code></pre>

<code>currentRoute.path</code> returns <code>'childpath'</code> and <code>currentRoute.component</code> returns <code>function _class() { ... }</code>.

blocks|key|121987|text|你可以像这样使用'isActive‘属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|121988|const+{+router+}+=+this.context;
if+(router.isActive('/login'))+{
++++router.push('/');
}|code-block|syntax|javascript|121989|isActive将返回true或false。|121990|使用react-router+2.7进行测试|121991|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You could use the 'isActive' prop like so:

<pre><code>const { router } = this.context;
if (router.isActive('/login')) {
 router.push('/');
}
</code></pre>

isActive will return a true or false.

Tested with react-router 2.7

blocks|key|119108|text|从3.0.0版本开始，您可以通过调用获取当前路由：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|119109|119110|+this.context.router.location.pathname|blockquote|119111|119112|119113|示例代码如下：|119114|var+NavLink+=+React.createClass({
++++contextTypes:+{
++++++++router:+React.PropTypes.object
++++},

++++render()+{+++
++++++++return+(
++++++++++++<Link+{...this.props}></Link>
++++++++);
++++}
});|code-block|syntax|javascript|119115|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|R|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|S|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|T|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|V|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|W|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|P|$]]

As of version 3.0.0, you can get the current route by calling:

<blockquote>
 this.context.router.location.pathname
</blockquote>

Sample code is below:

<pre><code>var NavLink = React.createClass({
 contextTypes: {
 router: React.PropTypes.object
 },

 render() { 
 return (
 &lt;Link {...this.props}&gt;&lt;/Link&gt;
 );
 }
});
</code></pre>

blocks|key|2673561|text|对于2017年有同样问题的用户，我的解决方法如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2673562|NavBar.contextTypes+=+{
++++router:+React.PropTypes.object,
++++location:+React.PropTypes.object
}|code-block|syntax|javascript|2673563|并像这样使用它：|2673564|componentDidMount+()+{
++++console.log(this.context.location.pathname);
}|2673565|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

For any users having the same issue in 2017, I solved it the following way:

<pre><code>NavBar.contextTypes = {
 router: React.PropTypes.object,
 location: React.PropTypes.object
}
</code></pre>

and use it like this:

<pre><code>componentDidMount () {
 console.log(this.context.location.pathname);
}
</code></pre>

blocks|key|119851|text|对我来说也是一样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|119852|...
<MyComponent+{...this.props}>
++<Route+path="path1"+name="pname1"+component="FirstPath">
++...
</MyComponent>
...|code-block|syntax|javascript|119853|然后，我可以在MyComponent函数中访问"this.props.location.pathname“。|119854|我忘了那是我…)下面的链接描述了有关制作导航栏等的更多信息：react+router+this.props.location|offset|length|119855|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/42010053/react-router-this-props-location^0|0|0|0|U|W|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Works for me in the same way:

<pre><code>...
&lt;MyComponent {...this.props}&gt;
 &lt;Route path="path1" name="pname1" component="FirstPath"&gt;
 ...
&lt;/MyComponent&gt;
...
</code></pre>

And then, I can access "this.props.location.pathname" in the MyComponent function.

I forgot that it was I am...))) Following link describes more for make navigation bar etc.: <a href="https://stackoverflow.com/questions/42010053/react-router-this-props-location">react router this.props.location</a>

blocks|key|119130|text|在App.js中添加以下代码并尝试|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|119131|window.location.pathname|code-block|syntax|javascript|119132|entityMap^0|1|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

In <code>App.js</code> add the below code and try

<pre><code>window.location.pathname
</code></pre>

blocks|key|2673706|text|尝试使用以下命令获取路径：document.location.pathname|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2673707|在Javascript中，您可以将当前URL分成几个部分。查看：https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/|2673708|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/^0|D|Q|0|W|27|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

Try grabbing the path using:
<code>document.location.pathname</code>

In Javascript you can the current URL in parts. Check out:
<a href="https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/" rel="nofollow noreferrer">https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/</a>

I have a router like below:

<pre><code>&lt;Router history={hashHistory}&gt;
 &lt;Route path="/" component={App}&gt;
 &lt;IndexRoute component={Index}/&gt;
 &lt;Route path="login" component={Login}/&gt;
 &lt;/Route&gt;
&lt;/Router&gt;
</code></pre>

Here's what I want to achieve :

<ol>
<li>Redirect user to <code>/login</code> if not logged in</li>
<li>If user tried to access <code>/login</code> when they are already logged in, redirect them to root <code>/</code></li>
</ol>

so now I'm trying to check user's state in <code>App</code>'s <code>componentDidMount</code>, then do something like:

<pre><code>if (!user.isLoggedIn) {
 this.context.router.push('login')
} else if(currentRoute == 'login') {
 this.context.router.push('/')
}
</code></pre>

The problem here is I can't find the API to get current route.

I found <a href="https://github.com/rackt/react-router/issues/119">this closed issue</a> suggested using Router.ActiveState mixin and route handlers, but it looks like these two solutions are now deprecated.

How to get current route in react-router 2.0.0-rc5

路由器

路由

我有一个如下所示的路由器：<Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="login" component={Log...

问如何在react-router 2.0.0-rc5中获取当前路由
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在react-router 2.0.0-rc5中获取当前路由EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在react-router 2.0.0-rc5中获取当前路由
EN