Reactjs 我在react应用程序中有两个.js文件问题!我正在使用react路由器dom。我的问题是链接标签
我正在用React制作一个静态web应用程序。它有更多的页面,所以我使用react router dom,但是当我使用Link标记时,它不仅显示在我想要它的页面上,而且还显示在它应该重定向的页面上。 除此之外,一切正常:它指向的页面呈现正常,但链接位于左下角。有人能看一下我的代码,告诉我我做错了什么吗 我只想在此处显示“待办事项列表”链接:Reactjs 我在react应用程序中有两个.js文件问题!我正在使用react路由器dom。我的问题是链接标签,reactjs,react-router-dom,Reactjs,React Router Dom,我正在用React制作一个静态web应用程序。它有更多的页面,所以我使用react router dom,但是当我使用Link标记时,它不仅显示在我想要它的页面上,而且还显示在它应该重定向的页面上。 除此之外,一切正常:它指向的页面呈现正常,但链接位于左下角。有人能看一下我的代码,告诉我我做错了什么吗 我只想在此处显示“待办事项列表”链接: import React, { Component } from 'react' import { BrowserRouter as Router, Rou
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
之所以会发生这种情况,是因为您渲染的链接没有任何指定的路由,因此它会在所有路由上渲染。请参阅以获得更好的理解 如果不希望发生这种情况,请定义另一个组件主页,例如,它将保留链接,并向路由器添加另一条路由,以呈现该组件
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>
)
}
}