önce js içine views diye bir klasör açıp içine login,register ve index klasörü oluşturup içlerinde index.js oluşturuyoruz. içlerine
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import React from "react"; const Index = () => { return <div>Burası Index</div> }; export default Index; ---------------------- import React from "react"; const Login = () => { return <div>Burası Login</div> }; export default Login; -------------------------- import React from "react"; const Register = () => { return <div>Burası Register</div> }; export default Register; |
ayrı ayrı ekliyoruz. sonra js klasöründe yer alan index.js dosyasının içine
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import React, {Component} from "react"; import ReactDOM from 'react-dom'; import Main from './Router'; import { BrowserRouter,Route } from "react-router-dom"; class Index extends Component{ render(){ return ( <BrowserRouter> <Route component={Main} /> </BrowserRouter> ) } } ReactDOM.render(<Index/>,document.getElementById("index")); |
js klasörü içine bir de Router.js oluşturuyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import React from "react"; import { Route,Switch} from 'react-router-dom'; import FrontIndex from './Views/Index' import FrontLogin from './Views/Login' import FrontRegister from './Views/Register' const Main = () => ( <Switch> <Route exact path="/" component={FrontIndex} /> <Route path="/login" component={FrontLogin} /> <Route path="/register" component={FrontRegister} /> </Switch> ); export default Main; |
bu kadar. sıradaki dersten devam