如何使Link / NavLink路径更短

Question

我正在使用react-router创建链接。主页上有一个注册/登录按钮，可将您定向到我的Signup-Login组件（url.com/signup-login）。注册/登录页面具有用于注册和登录的单独链接。我希望这些链接具有url.com/signup和url.com/login路径，而不是url.com/signup-login/signup和url.com/signup-login/login路径。我有什么办法吗？

编辑1：

应用（主页）：

<Header/>
<Route path="/signup-login" component={Signup-Login}/>
<Footer/>

标题（基本注册/登录链接）：

<NavLink to="/signup-login">Sign Up/Log In</NavLink>

注册登录页面（两个链接）：

<NavLink to="./signup-login/signup">Signup!</NavLink>
<NavLink to="./signup-login/login">Login!</NavLink>

<Switch>
   <Route path="/signup-login/signup" component={Signup} />
   <Route path="/signup-login/login" component={Login} />
</Switch>

我尝试将NavLink设置为=“ / signup”和Route path =“ / signup”，但失败。我需要“注册登录/注册”才能正常工作。有什么办法可以重写网址路径？我必须将其嵌套吗？

以下是“注册登录”页面的外观示例：

Answer 1

如果您将/ login和/ signup的路由放在主页上，则应该可以使用NavLink，并在其下方的任何位置使用该路径

主应用

class MyLog(val log: String)

val log1 = arrayOf(MyLog("1"), MyLog("2"), MyLog("3"), MyLog("4"), MyLog("5"))
val log2 = arrayOf(MyLog("10"), MyLog("20"), MyLog("30"), MyLog("40"), MyLog("50"))
val log3 = arrayOf(MyLog("100"), MyLog("200"), MyLog("300"), MyLog("400"), MyLog("500"))
val list = arrayOf(log1, log2, log3)

val text = StringBuilder()
list.forEach {
    it.forEach {
        text.append("${it.log}")
        text.append('\n')
        Log.d(TAG,"SUNLIGHT: ${text}")
    }
}
Log.d(TAG,"MOONLIGHT: ${text}")

注册登录页面（不再需要交换机/路由）

<Header/>
<Switch>
    <Route path="/signup-login" component={Signup-Login}/>
    <Route path="/login" component={Login}/>
    <Route path="/signup" component={Signup}/>
</Switch>
<Footer/>