路由动态路由

qtyzsl
217 阅读2分钟

路由植入

路由安装
1、安装包
yarn add react-router-dom;
react-router 分native 和 web 端
直接使用 web端

新增加Router.js

vi src/Router.js
import React from 'react';
import { BrowserRouter, HashRouter} from 'react-router-dom';
import App from './App.js';
const Router = () => (
    <BrowserRouter>
        <App/>
    </BrowserRouter>
)
export default Router;
这个js 目前作用就是管理路由模式一种是hash 一种是Browser
后期的mobx 或redux 可以直接在<App/> 入口注入
修改index.js
src/index.js
原来的 index.js 直接引入 App.js
如今多了一步
index.js--->Router.js--->App.js
引入 import Router from './Router';
使用
<Router />
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import Router from './Router';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>,
  document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
改造App.js
import React, { Component } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';
import Home from './views/Home';
import Test from './views/Test';
class App extends Component {
    render(){
        return(
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/test" component={Test} />
                <Redirect to="/"/>
            </Switch>
        )
    }
}
export default App;

react/first-react/src/App.js
import React, { Component } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';
import Home from './views/Home';
import Test from './views/Test';
import Input2 from './views/Input2';
import Web2008a from './views/Web2008a';
import Web from './views/Web';
import Tab from './views/Tab';
class App extends Component {
    render(){
        return(
    <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/test" component={Test} />
        <Route path="/input2" component={Input2} />
        <Route exact path="/web2008a" component={Web2008a} />
        <Route path={`/web2008a/:uid`} component={Web2008a} />
        <Route exact path="/web" component={Web} />
        <Route exact path={`/web/:cls`} component={Web} />
        <Route path={`/web/:cls/:uid`} component={Web} />
        <Redirect to="/"/>
    </Switch>
        )
    }
}
export default App;

react/first-react/src/views/Web2008a/index.jsx
import React, { Component } from 'react';
import List from './List.jsx';
import Detail from './Detail.jsx';
class View extends Component {
    ifPage(params){
        console.log(params.uid)
        if(params.uid){
            // 详情
            // return(
            //     <div>这是详情页面</div>
            // )
return(<Detail uid={params.uid}/>)
        }else {
            // 列表
            return <List/>
            // return(
            //     <div>
            //         这是列表首页
            //     </div>
            // )
        }
    }
    toUrl(){
        setTimeout(()=>{
                // this.props.history.push('/');
        },3000)
    }
    componentDidMount(){
        this.toUrl()
    }
    render(){
        console.log(this.props);
        let {match} = this.props;
        return(
<React.Fragment>
    <h3>web2008</h3>
    <header>组件</header>
    <div className="main clearfix">
        <div className="k_left">组件</div>
        <div className="k_right">
            {this.ifPage(match.params)}
        </div>
    </div>
    <footer>组件</footer>
</React.Fragment>
        )
    }
}
export default View;

react/first-react/src/views/Web2008a/List.jsx
import React, { Component } from 'react';
class View extends Component {
    render(){
        return(
            <div>
                列表页面
            </div>
        )
    }
}
export default View;

react/first-react/src/views/Web2008a/Detail.jsx
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class View extends Component {
    toUrl(){
        console.log(this.props)
        setTimeout(()=>{
            this.props.history.push('/')
        },3000)
    }
    componentDidMount(){
        this.toUrl()
    }
    render(){
        return(
            <div>
                详情页面
                {this.props.uid}
            </div>
        )
    }
}
export default withRouter(View);
//

react/first-react/src/views/Web/index.jsx
import React, { Component } from 'react';
import W1908 from './W1908/';
class View extends Component {
    ifPage(params){
        switch (params.cls) {
            case '2008':
                return <W1908/>
            case '1908':
                return <div>2008</div>
            case '2010':
                return <div>2010</div>
            case '2020':
            case '2020':
                return <div>2020</div>
            default:
                return <div>工作室</div>
        }
    }
    render(){
        let { match } = this.props;
        return(
            <div>
                web 架构
                {this.ifPage(match.params)}
            </div>
        )
    }
}
export default View;

react/first-react/src/views/Web/W1908/index.jsx
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import List from './List.jsx';
import Detail from './Detail.jsx';
class View extends Component {
    ifPage(params){
        console.log(params.uid)
        if(params.uid){
            // 详情
            // return(
            //     <div>这是详情页面</div>
            // )
return(<Detail uid={params.uid}/>)
        }else {
            // 列表
            return <List/>
            // return(
            //     <div>
            //         这是列表首页
            //     </div>
            // )
        }
    }
    toUrl(){
        setTimeout(()=>{
                // this.props.history.push('/');
        },3000)
    }
    componentDidMount(){
        this.toUrl()
    }
    render(){
        console.log(this.props);
        let {match} = this.props;
        return(
<React.Fragment>
    <h3>web2008</h3>
    <header>组件</header>
    <div className="main clearfix">
        <div className="k_left">组件</div>
        <div className="k_right">
            {this.ifPage(match.params)}
        </div>
    </div>
    <footer>组件</footer>
</React.Fragment>
        )
    }
}
export default withRouter(View);

react/first-react/src/views/Web/W1908/List.jsx
import React, { Component } from 'react';
class View extends Component {
    render(){
        return(
            <div>
                列表页面
            </div>
        )
    }
}
export default View;

react/first-react/src/views/Web/W1908/Detail.jsx
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class View extends Component {
    toUrl(){
        console.log(this.props)
        setTimeout(()=>{
            // this.props.history.push('/')
        },3000)
    }
    componentDidMount(){
        this.toUrl()
    }
    render(){
        return(
            <div>
                详情页面
                {this.props.uid}
            </div>
        )
    }
}
export default withRouter(View);
//
avatar
文章
阅读
粉丝