如何使用 React Router 鏈接到由另一個路由渲染的組件內的路由

Question

我正在嘗試在我的 reactjs 應用程序中使用 react 路由器。 我遇到了這個問題：

這就是我想要做的：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import About from '../Pages/About';
import Home from '../Pages/Home';
import Topics from '../Pages/Topics';
import LinkTest from '../Pages/LinkTest';

class AppRouter extends Component {
  render() {
    return (
        <Router>
          <div>
            <ul>
              <li>
                <Link to="/home">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
              <li>
                <Link to="/topics">Topics</Link>
              </li>
              <Route path="/home" component={LinkTest}/>
            </ul>

            <hr />

            <Route path="/home" component={Home}/>
            <Route path="/about" component={About} />
            <Route path="/topics" component={Topics} />

          </div>
      </Router>
    );
  }
}

export default AppRouter;

忽略“about”和“topic”組件，當我點擊“Home”鏈接時，它應該針對2條路由，一個渲染“LinkTest”，另一個渲染“Home”。

這是“LinkTest”內部的內容：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class LinkTest extends Component {
  render() {
      const {match}=this.props;
    return (
        <div>
            <Link to={`${match.url}/Test`}>Link To Test</Link>
        </div>
    );
  }
}

export default LinkTest;

在我的“主頁”組件中：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import Test from './Test';

class Home extends Component {
  render() {
      const {match} = this.props;
      console.log(match.url);
    return (
        <Router>
            <div>
                <h2>
                    Hello from Home page
                    <Link to={`${match.url}/Test`}>Link To Test</Link>
                    <Route path={`${match.url}/Test`} component={Test}/>
                </h2>

            </div>
        </Router>

    );
  }
}

export default Home;

然而：

• 當我單擊“LinkTest”組件（之前呈現的）內的鏈接時，瀏覽器上的 url 顯示為“ http://localhost:3000/home/Test ”，但沒有任何反應。

• 當我單擊“Home”組件中的鏈接時（使用相同鏈接與“LinkTest”同時呈現），它在瀏覽器上顯示相同的 URL：“ http://localhost:3000/home/測試”，只是這次它呈現了“測試”組件。

為什么會發生這種情況？ （我想要實現的是我想使用“LinkTest”中的鏈接來呈現“Home”組件中的“Test”組件，或類似的東西）。

我希望這已經足夠清楚了。

Answer 1

您可以通過以下方式進行：

<Route exact path='/a' component={A} />
<Route path='/b' component={B} />

// Following should be router inside Component B
<Route exact path='/b/abc' component={OtherComponent}

如果您願意，我已經准備了一些 react-router 4 示例。 這些都托管在這里。 https://github.com/SandipNirmal/react-router-examples

Answer 2

如果您需要在ComponentB嵌套路由，您還應該為這些Route添加Link 。 並使用match.url和match.path構建嵌套的Link和Route 。

const ComponentB = ({ match }) => {
    return (
        <div> 
            <div>
                <ul>
                    <li><Link to={`${match.url}/c`}>Component C</Link></li>

                    // more Links
                    <li><Link to={`${match.url}/css`}>CSS</Link></li>
                    <li><Link to={`${match.url}/react`}>React</Link></li>
                </ul>
            </div>
            <div>
                <Route path={`${match.path}/c`} component={ComponentC} />

                // more nested Routes
                <Route path={`${match.path}/css`} render={() => { return <h1>CSS</h1> }}/>
                <Route path={`${match.path}/react`} render={() => { return <h1>React</h1> }}/>
            </div>
        </div>
    );
}

---

嵌套路由

通過Route創建的組件將自動傳遞以下prop對象： match 、 location和history 。

使用match您可以實現嵌套的Route s。 match對象包含以下屬性：

• params — （對象）從對應於路徑動態段的 URL 解析的鍵/值對
• isExact — (boolean) true 如果整個 URL 匹配（沒有尾隨字符）
• path —— （字符串）用於匹配的路徑模式。 用於構建嵌套的Route s
• url — （字符串）URL 的匹配部分。 用於構建嵌套的Link s

---

參考

1. https://medium.freecodecamp.org/beginners-guide-to-react-router-4-8959ceb3ad58
2. https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf