如何解决使用甲酸反应路由器
我在下面的代码中使用react-router,但是我不确定格式是否正确,我可以正常运行。如果有什么问题,请告诉我。
render() {
return (
<HashRouter>
<hr />
<Link to="/Brand">Brand</Link>
<Link to="/home">Home</Link>
<Link to="/Users">Users</Link>
<Link to="/Create">Create</Link>
<hr />
<Route path="/Users">
<Users
users={this.state.users}
handleUserOpen={this.handleUserOpen}
handleDeleteUsers={this.handleDeleteUsers}
handleDeleteUser={this.handleDeleteUser}
/>
<UserModal
selectedUser={this.state.selectedUser}
viewUser={this.state.viewUser}
handleClearSelectedUser={this.handleClearSelectedUser}
/>
</Route>
<Route path="/Create">
<AddUser
handleAddUser={this.handleAddUser}
users={this.state.users}
/>
</Route>
</HashRouter>
);
}
}
解决方法
使用本身对我来说似乎并不对。但是,我通常的处理方式是在src中的一个单独文件中声明路由。
是这样的:
src / Routes.js:
import React from 'react';
import { BrowserRouter,Route,Switch } from 'react-router-dom';
import Home from './pages/Home';
import Brand from './pages/Brand';
import Users from './pages/Users';
import Create from './pages/Create';
export default function Routes() {
return (
<BrowserRouter>
<Switch>
<Route path="/" exact component ={ Home } />
<Route path="/brand" component={ Brand } />
<Route path="/users" component={ Users } />
<Route path="/create" component={ Create } />
</Switch>
</BrowserRouter>
)
}
该路线中的关键字“精确”表示它将是本国路线。像上面的示例一样,通常将其分配给“ /”路由。
src / App.js:
import React from 'react';
import './global.css'
import Routes from './routes';
function App() {
return (
<Routes />
);
}
export default App;
这些组件看起来与您展示的非常相似。如果您在Routes.js中声明了所有链接,则链接应该可以正常工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。