Question

我的reactJS路由出现问题，当我单击链接时，URL在地址栏上更改，但是除非重新加载页面，否则它不会呈现该组件。

这是我的代码：

index.js

#install_github("moodymudskipper/safejoin")
library(dplyr, warn.conflicts = FALSE)
library(safejoin)
df1 %>% 
  eat(df2, beatles , .by="name",.fill = 0) 
#>             name instrument beatles
#> 1    John Lennon     guitar       1
#> 2    Mick Jagger     vocals       0
#> 3    Ringo Starr      drums       1
#> 4 Keith Richards     guitar       0

Home.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Switch, Route, BrowserRouter } from 'react-router-dom';
import Home from './components/Home';
import CreateProduct from './components/products/CreateProduct';

if (document.getElementById('root')) {
    ReactDOM.render(
        <BrowserRouter>
                <Switch>
                    <Route path="/home" component={Home} exact={true} />
                    <Route path="/products/add" component={CreateProduct} exact={true} />
                    <Home />
                </Switch>
        </BrowserRouter>,
        document.getElementById('root'));
}

CreateProduct.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Link, BrowserRouter} from "react-router-dom";

export default class Home extends Component {
    render(){
        return(
            <BrowserRouter>
                <Link className="nav-link" to="/products/add">Create Product</Link>
            </BrowserRouter>
        );
    }
}

请问我在这里想念什么？

Answer 1

我复制了您的代码，当您不使用嵌套的BrowserRouters时，没有任何问题。我认为您只需要Index.js的根目录

Answer 2

由于您已经用浏览器路由器包装了应用程序，因此它的属性将应用于包装的所有内容，因此您无需在每个组件中都使用它。

此外，如果您希望路线精确，则只需写精确而不是精确= {true}

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Switch, Route, BrowserRouter } from 'react-router-dom';
import Home from './components/Home';
import CreateProduct from './components/products/CreateProduct';

if (document.getElementById('root')) {
    ReactDOM.render(
        <BrowserRouter>
                <Switch>
                    <Route path="/home" component={Home} exact />
                    <Route path="/products/add" component={CreateProduct} exact />
                    <Home />
                </Switch>
        </BrowserRouter>,
        document.getElementById('root'));
}


import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Link} from "react-router-dom";

export default class Home extends Component {
    render(){
        return(
            <Link className="nav-link" to="/products/add">Create Product</Link>
        );
    }
}

React JS路由仅在重新加载时有效

2 个答案: