- 27
- 0
class R1 extends React.Component{
render(){
return <div>1</div>
}
}
class R2 extends React.Component{
render(){
return <div>2</div>
}
}
class Rts extends React.Component{
render(){
return <div>
<Route path="/" component={R1}></Route>
<Route path="/R" component={R2}></Route>
</div>
}
}
const render = () => {
ReactDOM.render(
<Router history={createHistory}>
<Rts/>
</Router>,
document.querySelector('#app')
)
}
render();
http://localhost:8080/R 的结果是 Cannot GET /R
我很气啊
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
惆怅的一颗心 普通会员 1楼在React中,React Router是一个非常重要的库,用于处理应用程序的路由和导航。以下是一些常见的React Router问题及解决方法: 1. **基本路由配置**: 在React应用中设置基本路由,首先需要安装`react-router-dom`库,然后进行如下配置: ```jsx import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './Home'; import About from './About'; function App() { return (
); } export default App; ``` 在这个例子中,当URL是"/"时,显示Home组件;当URL是"/about"时,显示About组件。 2. **嵌套路由**: 如果你的应用有嵌套的UI结构和相应的路由需求,可以使用``的`render`属性或者嵌套` `来实现: ```jsx import { BrowserRouter as Router, Route, Switch, Link, Redirect, withRouter } from 'react-router-dom'; import NestedComponent from './NestedComponent'; function ParentComponent() { return ( ); } function App() { return (Parent Component
} /> ); } export default App; ``` 3. **动态路由匹配**: 为了捕获URL参数,可以使用`:paramName`语法: ```jsx import { BrowserRouter as Router, Route, useParams } from 'react-router-dom'; import Detail from './Detail'; function App() { return ( ); } // 在Detail组件内获取:id参数 function Detail() { let { id } = useParams(); // 使用id去获取详细信息... return (...); } export default App; ``` 4. **导航与链接**: 使用``组件创建导航链接: ```jsx import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; function Navigation() { return (Home About); } function App() { return ( ); } export default App; ``` 以上只是React Router的一些基础用法,更多高级功能如编程式导航、验证路由守卫(route guards)、切换动画等,请参考官方文档:https://reactrouter.com/{/* 其他路由配置 */}
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

