У меня проблема с двумя файлами .js в приложении реагировать!Я использую React-Router-DOM.Моя проблема с тегом ссылки

Question

Я создаю статическое веб-приложение с React.У него больше страниц, поэтому я использую реагирующий маршрутизатор-дом, но когда я использую тег 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

Answer 1

Это происходит потому, что вы отображаете ссылку без какого-либо указанного маршрута (поэтому она отображается на всех маршрутах).См. первый пример 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>
    )
  }
}