如何使用React Router降低3个级别,例如路径=’…/file’。

huangapple go评论80阅读模式
英文:

How to drop 3 levels with react router ei. path='.../file'

问题

目前,我正在使用React Router将不同的路径路由到不同的React组件。以下是示例代码:

<Switch>
    <Route path="/profile/viewmessage/:message">
        <Profile />
    </Route>
    <Route path=".../friends">
        <Friends />
    </Route>
</Switch>

编辑:如果将.../friends路径保留,此代码将导致路径为"/profile/viewmessage/message/.../friends"。

您不能简单地使用路径"/friends",因为如果您尝试查看消息,路径实际上将是"/profile/message/friends"。

您也不能使用路径"../friends",因为这将导致整体路径为"/profile/friends"。

我知道肯定有一种方法可以克服这个问题,但我尚未能在线找到一个方法。是否有一种简洁的方法来删除多个级别?

非常感谢您的帮助和指导。

英文:

Currently I am using a React Router to route different paths to different react components. I have the following example code: <br>

&lt;Switch&gt;
    &lt;Route path=&quot;/profile/viewmessage/:message&quot;&gt;
        &lt;Profile /&gt;
    &lt;/Route&gt;
    &lt;Route path=&quot;.../friends&quot;&gt;
        &lt;Friends /&gt;
    &lt;/Route&gt;
&lt;Switch&gt;

<br>
<i>EDIT: This code will result in a path: "/profile/viewmessage/message/.../friends" if left with the .../friends path.</i><br>
You can't have the path simply be "/friends" because then the path will actually be "/profile/message/friends" if you are trying to view a message.<br> You can't use path="../friends" because then the overall path will be "/profile/friends".<br> I know there has to be a way to overcome, this I just haven't been able to find one online. Is there a nice way of dropping several levels. <br><br>Thanks in advance. Any pointers in the right direction to do this is much appreciated.

答案1

得分: 0

抱歉,以下是翻译好的部分:

"Wow, this was an unfortunate question... <br><br>Apparently all you have to do is drop to the exact path you want having the path="/friends" for example including the full path.<br><br>
So if you had "/page/view/select/message" and you wanted to drop to the view section you would set path="/page/view"<br>you must include the prefix "/" or it will not drop to the level you want (which is the problem I had).

To fix the problem I had all you have to do is give the path the full path to where you want to navigate with a preceding "/".

the correct code would have been:

&lt;Switch&gt;
&lt;Route path=&quot;/profile/viewmessage/:message&quot;&gt;
    &lt;Profile /&gt;
&lt;/Route&gt;
&lt;Route path=&quot;/friends&quot;&gt;
    &lt;Friends /&gt;
&lt;/Route&gt;

<Switch>
Again this works because of the preceding /. if the path had been just "friends" then it would append that to the current path. Such a simple answer."

英文:

Wow, this was an unfortunate question... <br><br>Apparently all you have to do is drop to the exact path you want having the path="/friends" for example including the full path.<br><br>
So if you had "/page/view/select/message" and you wanted to drop to the view section you would set path="/page/view"<br>you must include the prefix "/" or it will not drop to the level you want (which is the problem I had).

To fix the problem I had all you have to do is give the path the full path to where you want to navigate with a preceding "/".

the correct code would have been:

&lt;Switch&gt;
&lt;Route path=&quot;/profile/viewmessage/:message&quot;&gt;
    &lt;Profile /&gt;
&lt;/Route&gt;
&lt;Route path=&quot;/friends&quot;&gt;
    &lt;Friends /&gt;
&lt;/Route&gt;

<Switch>
Again this works because of the preceding /. if the path had been just "friends" then it would append that to the current path. Such a simple answer.

huangapple
  • 本文由 发表于 2020年1月3日 13:42:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/59573704.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定