index.html

Home / TryReact / TryRoute / index.html
166 lines | 5.77 kB Blame History Raw Download
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Маршруты в React</title>
</head>
<body>
    <div id="app"></div>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>

    <script type="text/babel">
        const Router = ReactRouterDOM.BrowserRouter;
        const Route = ReactRouterDOM.Route;
        const Switch = ReactRouterDOM.Switch;
        const Link = ReactRouterDOM.Link;
        const Redirect = ReactRouterDOM.Redirect;
            
        class About extends React.Component{
            render(){
                return <h2>О сайте</h2>;
            }
        }
        class NotFound extends React.Component{
            render(){
                return <h2>Ресурс не найден</h2>;
            }
        }


        class ProductView1 extends React.Component{
            render(){
                // получаем параметры
                const id= this.props.match.params.id;
                const name = this.props.match.params.name;
                return <h2>id: {id}  Name: {name}</h2>;
            }
        }
        class Old extends React.Component{
            render(){
                return <Redirect to={`/ProductView1/${this.props.match.params.id}/${this.props.match.params.name}`} />;
            }
        }

        class ProductLinks extends React.Component{
            
            constructor(props){
                super(props);

                this.state = { 
                    Items:
                    [
                        {id: 1, name: "Item1"}, 
                        {id: 2, name: "Item2"}, 
                        {id: 3, name: "Item3"} 
                    ]
                }

            }
            
            render(){
                return (<div>
                            <p><Link to="/ProductView1/1/Name1">P1</Link></p>
                            <p><Link to="/ProductView1/Name1-1">P1 other</Link></p>
                            <p><Link to="/ProductView1/Number/Name1">P1 BadLink</Link></p>
                            <p><Link to="/ProductView1/2/Name2">P2</Link></p>
                            <p><Link to="/Old/2/Name2">Redirect P2</Link></p>

                            <hr />
                            {
                                this.state.Items.map(function(item){
                                    return <p><Link to={`/ProductView1/${item.id}/${item.name}`}>{item.name}</Link></p>;                                                
                                })
                            }
                        </div>
                );
            }
        }


        class Main extends React.Component{
            render(){
                return <h2>Главная</h2>;
            }
        }

        class Header extends React.Component{
            render(){
                return (<div>
                            <p>Header</p>
                            <table>
                                <tr>
                                    <td><Link to="/">Main</Link></td>
                                    <td><Link to="/About">About</Link></td>
                                    <td><Link to="/ProductLinks">ProductLinks</Link></td>
                                    <Link to="/old">Redirect</Link>

                                    <td><Link to="/unknow">BadLinkExample</Link></td>
                                </tr>
                            </table>
                        </div>
                );
            }

        }
        class Footer extends React.Component{            
            render(){              
                return (<div>
                            <p>Footer</p>
                            <p>Creat by cccc1808</p>
                            <hr />
                            <p>Match: {JSON.stringify(this.props.match)}</p>
                            <p>Location {JSON.stringify(this.props.location)}</p>
                        </div>
                );
            }
        }


        class MainLayout extends React.Component{           
            render(){
                console.log(this.props.match);
                console.log(this.props.location);

                return (<div>
                            <Header />
                            <hr />

                            <Switch>
                                <Route exact path="/" component={Main} />
                                <Route path="/About" component={About} />

                                <Route path="/ProductLinks" component={ProductLinks} />
                                <Route path="/ProductView1/:id(\d+)/:name" component={ProductView1} />
                                <Route path="/ProductView1/:name-:id" component={ProductView1} />
                                <Route path="/Old/:id(\d+)/:name" component={Old} />
                                
                                <Redirect from="/old" to="/About" />

                                <Route component={NotFound} />
                            </Switch>

                            <hr />
                            <Footer match={this.props.match} location={this.props.location}/>
                        </div>
                );
            }
        }




        ReactDOM.render(
            <Router>
                <Switch>
                    <Route path="/" component={MainLayout} />                    
                </Switch>
            </Router>,
            document.getElementById("app")
        )
        </script>
</body>
</html>