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发送到正确的页面

1 个答案: