账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    React-router路由问题
    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 (

      Parent Component

      } />
      ); } function App() { return ( ); } 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/
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部