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;

忽略“关于”和“主题”组件，当我单击“主页”链接时，它应以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”，但没有任何反应。
当我单击“主页”组件内的链接时（该链接使用相同的链接与“ LinkTest”同时呈现），它在浏览器上显示了相同的URL：“ {{3} }”，只是这次它呈现了“测试”组件。

为什么会这样？（我想要实现的是我想使用“ LinkTest”内部的链接来呈现“ Home”组件内部的“ Test”组件，或类似的东西。）

我希望这很清楚。

Answer 1

您可以通过以下方式进行操作：

insert()

如果您愿意，我准备了几个react-router 4示例。这些都在这里托管。 https://github.com/SandipNirmal/react-router-examples

Answer 2

如果您在ComponentB内需要嵌套路由，则还应该为这些Link添加Route个。并使用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。 match对象包含以下属性：

params －（对象）从对应的URL解析的键/值对到路径的动态段
isExact-（布尔值）如果整个URL都匹配（没有结尾字符），则为
path — （字符串）用于匹配的路径模式。用于构建嵌套的Route
url — （字符串）URL的匹配部分。对建筑有用嵌套的Link

如何使用React Router

2 个答案:

嵌套路由

参考