我在反应应用程序中遇到了两个 .js 文件的问题！我正在使用 react-router-dom。我的问题是链接标签答案

【问题标题】：I have a problem with two .js files in a react app! I am using the react-router-dom. My problem is with the Link tag我在反应应用程序中遇到了两个 .js 文件的问题！我正在使用 react-router-dom。我的问题是链接标签
【发布时间】：2019-06-27 12:26:59
【问题描述】：

我正在使用 React 制作一个静态 Web 应用程序。它有更多页面，所以我使用 react-router-dom，但是当我使用 Link 标签时，它不仅会显示在我想要它的页面上，还会显示在它应该重定向的页面上。除了一切正常：它指向的页面渲染得很好，但链接在左下角。谁能查看我的代码并告诉我我做错了什么？

我只想在此处显示“待办事项列表”链接：

import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { Link } from 'react-router-dom'
import Todo from '../apps/todo/Todo'

class Projects extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route exact path="/todo" component={Todo} />
          <Link style={projectsTodo} href="/todo">
            To Do List
          </Link>
        </div>
      </Router>
    )
  }
}

链接显示在这里：

import React, { Component } from 'react'
import Header from './layout/Header'
import Todos from './Todos'
import uuid from 'uuid'

class Todo extends Component {
  state = {
    todos: [
      {
        id: uuid.v4(),
        title: 'Learn React',
        completed: false,
      },
      {
        id: uuid.v4(),
        title: 'Find suitable web hosting service',
        completed: false,
      },
    ],
  }

  delTodo = id => {
    this.setState({
      todos: [...this.state.todos.filter(todo => todo.id !== id)],
    })
  }

  render() {
    return (
      <div>
        <Header />
        <Todos todos={this.state.todos} delTodo={this.delTodo} />
      </div>
    )
  }
}

export default Todo

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

发生这种情况是因为您在没有任何指定路线的情况下呈现链接（因此它会在所有路线上呈现）。请参阅first example of React Router 以获得更好的理解。

如果您不希望发生这种情况，请定义另一个组件 Home（例如）来保存链接并向您的路由器添加另一个路由来呈现该组件。

import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { Link } from 'react-router-dom'
import Todo from '../apps/todo/Todo'

const Home = props => {
  return (
    <div>
      <h2>Home</h2>
      <Link style={projectsTodo} href="/todo">
        To Do List
      </Link>
    </div>
  )
}

class Projects extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route exact path="/" component={Home} />
          <Route exact path="/todo" component={Todo} />
        </div>
      </Router>
    )
  }
}

【讨论】：