React-router routing problem

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("-sharpapp")
    )
}
render();

http://localhost:8080/R results in Cannot GET / R
I am angry

React-router
Feb.17,2022 
<Route exact path="/" component={R1}></Route>
<Route path="/R" component={R2}></Route>

need to introduce 

import {hot} from 'react-hot-loader';
import { Switch, HashRouter, Route} from 'react-router-dom';   
class R1 extends React.Component{
    render(){
        return <div>1</div>
    }
}

class R2 extends React.Component{
    render(){
        return <div>2</div>
    }
}

@hot(module)
class Rts extends React.Component{
    render(){
        return  <div>   
                    <HashRouter> 
                        <Switch>
                            <Route exact={true} path="/" component={R1}></Route>
                            <Route exact={true} path="/r2" component={R2}></Route>
                        </Switch>   
                    </HashRouter>
                 </div>  
    }
}

const render = () => {
    ReactDOM.render(               
            <Rts/>
       ,
        document.querySelector('-sharpapp')
    )
}
render();

remember @ hot (module) , so that's fine

Previous: Problems caused by css3 transform. It feels like it's been partially cut.

Next: The backend uses .net, and the front end uses Vue-cli to develop a CMS SPA front-end separation application.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu