React-router-dom：点击Link无限期添加到Url Link的路由

Posted 2023-02-22

【中文标题】React-router-dom：点击Link无限期添加到Url Link的路由

【英文标题】：React-router-dom: Clicking on Link adds the route to the Url Link indefinitely

【发布时间】：2020-06-02 13:21:47

【问题描述】：

经过几次尝试，我已经设法使用 React-router-dom 实现了基本的嵌套路由。 这是简单的项目结构：

这里是相关文件：

App.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import  BrowserRouter, Switch, Route  from "react-router-dom";

import ParentComponent from "./Components/nestedComponents/ParentComponent";
import NavBar from "./Components/Shared/NavBar";
function App() 
  return (
    <div className="App">
      <BrowserRouter>
        <NavBar />
        <Switch>
          <Route path="/home" name="Home" component=ParentComponent />
        </Switch>
      </BrowserRouter>
    </div>
  );


export default App;

NavBar.js

import React from "react";
import  Link  from "react-router-dom";

export default function NavBar() 
  return (
    <div>
      <Link to=`home/nestedComponentOne`> Nested Component One </Link>
      <Link to=`home/nestedComponentTwo`> Nested Component Two </Link>
    </div>
  );

父组件.js

import React from "react";
import nestedComponentOne from "./nestedComponentOne";
import nestedComponentTwo from "./nestedComponentTwo";
import  Switch, Route  from "react-router-dom";

export default function ParentComponent() 
  return (
    <div>
      <Switch>
        <Route path="/home/nestedComponentOne" component=nestedComponentOne />
        <Route path="/home/nestedComponentTwo" component=nestedComponentTwo />
      </Switch>
    </div>
  );

nestedComponentOne.js

import React from "react";

export default function nestedComponentOne() 
  return <div>NESTED COMPONENT 1</div>;

nestedComponentTwo.js

import React from "react";

export default function nestedComponentTwo() 
  return <div>NESTED COMPONENT 2</div>;

所以这是结果： 如果我点击 nestedComponentOne：

如果我点击 nestedComponentTwo：

问题是当我在第一次点击后再次点击 nestedComponentOne（或两个）时，路由被添加到 url字符串 而不是替换它：

【参考方案1】：

您的代码需要一些更新。 Working Demo

NavBar.js

这里你忘记在前面添加斜杠/ 以从根链接。

      <Link to=`/home/nestedComponentOne`> Nested Component One </Link>
      <Link to=`/home/nestedComponentTwo`> Nested Component Two </Link>

ParentComponent.js

由于我们从该组件中删除了Switch，因此我们需要从父路由器获取匹配信息并传递路径以导航相应的嵌套组件

     export default function ParentComponent( match ) 
      return (
        <div> 
          <Route path=`$match.path/nestedComponentOne` component=nestedComponentOne />
          <Route path=`$match.path/nestedComponentTwo` component=nestedComponentTwo />
        </div>
      );
    

【参考方案2】：

您为什么不尝试将所有路线放在一个文件中。像这样的：

<Route exact path="/home" name="Home" component=ParentComponent />
<Route path="/home/nestedComponentOne" component=nestedComponentOne />
<Route path="/home/nestedComponentTwo" component=nestedComponentTwo />

【讨论】：

因为我希望nestedRoutes在一个文件中，根路由/home在App.js中，否则ReactRouter将找不到路径/home