Pulse Of The Blogosphere » React-Router: 3. Custom Component Props

HOME / Javascript / ReactJS old / React-Router: 3. Custom Component Props

React-Router: 3. Custom Component Props

Author: admin - Posted: 03/05/21 - Update: 20/05/22

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReactJS</title>
    <style>
        .link-active {
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.2.0/react-router-dom.js"></script>

    <script type="text/babel">
        const { HashRouter, Switch, Route, NavLink, Link } = ReactRouterDOM

        const Home = (props) => <p>{JSON.stringify(props, null, "\t")}</p>
        const Product = (props) => <p>{JSON.stringify(props, null, "\t")}</p>
        const Blog = (props) => <p>{JSON.stringify(props, null, "\t")}</p>
        const About = (props) => <p>{JSON.stringify(props, null, "\t")}</p>
        const NotFound = (props) => <h3>Not found</h3>
        const App = () => (
            <HashRouter>
                <div>
                    <Link to="/"> Home </Link>
                    <Link to="/Product"> Product </Link>
                    <Link to="/Blog"> Blog </Link>
                    <Link to="/About"> About </Link>
                    <Link to="/404"> 404 </Link>
                </div>
                <Switch>
                    <Route path="/" exact component={(routes) => <Home routes={routes} number={99}/>} />
                    <Route path="/Product" component={Product} />
                    <Route path="/Blog" component={({ match }) => <Blog match={match} />} />
                    <Route path="/About" component={() => <About />} />
                    <Route path="" component={NotFound} />
                </Switch>
            </HashRouter>
        );

        ReactDOM.render(
            <App />,
            document.getElementById('root')
        );

    </script>
</body>

</html>

<!DOCTYPE html>

<head>

<title>ReactJS</title>

<style>

.link-active {

background-color: green;

}

</style>

</head>

<body>

const { HashRouter, Switch, Route, NavLink, Link } = ReactRouterDOM

const Home = (props) => <p>{JSON.stringify(props, null, "\t")}</p>

const Product = (props) => <p>{JSON.stringify(props, null, "\t")}</p>

const Blog = (props) => <p>{JSON.stringify(props, null, "\t")}</p>

const About = (props) => <p>{JSON.stringify(props, null, "\t")}</p>

const NotFound = (props) => <h3>Not found</h3>

const App = () => (

<div>

<Link to="/Product"> Product </Link>

<Link to="/About"> About </Link>

</div>

</Switch>

</HashRouter>

);

ReactDOM.render(

<App />,

document.getElementById('root')

);

</script>

</body>

</html>

ReactJS old

Demo-Count: 8. use Redux-Toolkit, Redux-Saga: Effect Creator