<Link> 没有使用 react-router-dom 发送到正确的页面

Question

我正在尝试使用 React 构建我的第一个网站，但我在导航方面遇到了很多麻烦。我正在使用 react-router，出于某种原因，我的标签正在更改页面顶部的 url，但没有呈现正确的组件。

这是我的 navbar.jsx:

import React, { Component } from "react";
import { Link, BrowserRouter } from "react-router-dom";

class Navbar extends Component {

 render() {
        return (
          <BrowserRouter>
            <div>
                <ul>
                    <li><Link to={"/test"}>Test</Link></li>
                </ul>
            </div>
          </BrowserRouter>
        )
    }
}

export default Navbar;

这里是test.jsx:

import React, { Component } from "react";

class Test extends Component {
  state = {};
  render() {
    return (
      <div>
        <h1>Test</h1>
      </div>
    );
  }
}

export default Test;

有谁知道为什么这会改变 url（如预期），但不会呈现 test.jsx？

Answer 1

您需要使用Route 来为不同的路由渲染组件。

import React, { Component } from 'react';
import { Link, BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import Test from './import-path-of-test-component';

class Navbar extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <ul>
            <li>
              <Link to={'/test'}>Test</Link>
            </li>
          </ul>
          <Switch>
            <Route exact path="/test" component={Test} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default Navbar;

<Link> 没有使用 react-router-dom 发送到正确的页面

<Link> is not sending to the proper page with react-router-dom

reactjs

react-router

react-router-dom